2011-08-01 7 views
1

나는 상점 위치 목록을 생성하고지도 아래에 DIV를 만드는이 자바 스크립트 라인을 가지고있다. 항목이 페이지 위아래에 표시됩니다.자바 스크립트와 CSS를 사용하여 왼쪽에서 오른쪽으로 정렬

왼쪽에서 오른쪽, 위에서 아래로 3 개의 항목을 연속으로 표시하고 싶습니다. 사이드 바 문제로

function createSidebarEntry(marker, name, address, city, state, zipcode, telephone, images, url) { 
    var div = document.createElement('div'); 
    var html = "<p><a href='http://" + url + "'>" + name + "</a><br/>" + address + "<br/>" + city + ", " + state + " " + zipcode + "<br/>" + (formatPhone(telephone)) + "</p>"; 
    div.innerHTML = html; 
    div.style.marginBottom = '5px'; 
    return div; 
} 

테이블은 바람직한 방법이 될 것이다 :

기능이 무엇입니까?

#sidebar { 
    text-align: left; 
    margin: 0px auto; 
    padding: 0px; 
    border:0; 
    width:665px; 
    font-size:10pt; 
    font-family:Arial; 
    color:#656668; 
    display: table-cell; 
} 

그리고 불행하게도 등 수익성 작업을 한 후, 나는 운이 실행 듯 한 : 나는대로 DIV를 설정하기 위해 노력했다. 누구든지 동적으로 반환되는 데이터를 사용하고 세 열의 CSS로 서식을 적용 할 수 있습니까? 나는 인터넷 검색을하고 있으며, 내가 보는 모든 것은 내 DIV 컨테이너 내에 세 개의 열 스타일을 만드는 것을 가리킨다.

+0

게시물에 더 자세한 설명이 포함되어야합니다. 실제 질문과 관련된 것. – nthpixel

+0

사과하고 감사합니다! –

+0

@nthpixel : 게시물을 개선 할 수 있다고 생각되면 [편집 권한 제안] (http://stackoverflow.com/posts/6894206/edit)을 자유롭게 할 수 있습니다. 그것을하는 당신을 위해 +2 담당자! –

답변

1

고정 된 width으로 부모 요소를 설정하고 하위에 float을 적용하고 width33%에 적용 해보십시오. 나중에 clear을 사용하는 것을 잊지 마십시오.

0

jquery로 요소를 만들 것을 제안합니다. 그것은 더 쉽고 우아합니다.

하지만 문제의 근본 원인은 float:left; 스타일을 div에 추가해야한다는 것입니다. 이렇게하면 모든 div가 같은 행에 배치됩니다.

아, 가능한 한 작은 테이블을 사용하여 페이지의 요소를 레이아웃하십시오. Divs와 CSS는 갈 길이 멀다.

관련 문제