두 개의 콘텐츠 크기 HTML 요소를 나란히 배치하는 방법은 무엇입니까?

Question

나는 그 내용에 의해 크기의 모든 요소가있는 웹 사이트에 대한 다음과 같은 레이아웃을 생성해야합니다. 요소의 너비를 설정할 수 없습니다. 다른 방법이 없다면 가장 바깥 쪽 컨테이너 (0) 일 수 있습니다.

최 용기 (0)은 페이지 레이아웃의 다른 부분에 의해 크기가된다. 동일한 구조의 여러 항목 (1)을 포함합니다. 컨테이너 (1)에는 작은 내용 (2)이 들어 있습니다. 실제로는 숫자입니다. 그것을 장 번호로 생각하십시오. 이 번호의 오른쪽에는 여러 부분 (3) ~ (6)으로 구성된 실제 내용이있는 컨테이너 (3)가 있습니다. 모든 콘텐츠 항목 (4) ~ (6)이 항상 존재하는 것은 아닙니다. 현재의 콘텐트 아이템들은 콘테이너 (3)의 상부로 이동하여 최초의 현재 콘텐트 아이템이 번호 (2)의 오른쪽에있게된다. 콘텐트 아이템 (4) 내지 (6)은 긴 랩 텍스트를 포함 할 수있다.

마침내 전체 구조가 중첩 세 번 - 용기 (6) 컨테이너와 같은 구조를 갖는다 (1). 가장 깊은 네 스팅 레벨 컨테이너 (3)에는 수평 스크롤이 가능한 매우 넓은 테이블이 있습니다.

___________________________________ 
|0 _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|     .     | 
|     .     | 
|     .     | 
| _______________________________ | 
| |1 _____ ___________________ | | 
| | |2 | |3 _______________ | | | 
| | |_____| | |4    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |5    | | | | 
| |   | |_______________| | | | 
| |   | _______________ | | | 
| |   | |6    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |    | | | | 
| |   | |_______________| | | | 
| |   |___________________| | | 
| |_______________________________| | 
|___________________________________| 

까지 난 된 div 사용

• 레이아웃을 시도했지만 위치 실패 (2) 배치 된 div하여 부동 왼쪽
• 옆 (3) 측 (2) 및 (3) 그러나 하나 (3) 주위에 떠의 내용 (2) 또는 (3)으로 이동 (2) (3) 왼쪽 폭
• 배치 된 DIV를 사용하여 부동 될 경우 (2) 및 우측 부동 (3)하지만 (3)의 내용이 좁 으면 (2)와 (3) 사이의 간격은 임의로 넓어 질 수 있습니다.
,451,515,
• 개의 열이 중첩 테이블을 이용하여 레이아웃 - 하나 (2) 및 하나의 (3) - 그러나 컨테이너 (0)에 대한 테이블 폭을 제한하지 못했다. 가장 깊은 중첩 수준의 매우 넓은 테이블은 모든 셀과 테이블을 오른쪽으로 밀어 넣습니다. 테이블 표시 스타일하지만 브라우저 지원이 나쁨이었다로 된 DIV에 따라
• 레이아웃은 그래서 빨리이 아이디어
• 이 CSS 2.1 12.4.1에서 설명하지만,이 안에 숫자를 넣어 것으로 정렬 된 목록을 사용하여 레이아웃을 (포기 삼). 또한 내 번호가 연속적임을 보장 할 수는 없습니다 (그러나 카운터를 명시 적으로 설정하여 해결할 수 있음).

최종 결과는 다음과 같아야합니다.

1 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    1.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

     1.1.1 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 
      ________________________________________________________________ 
      |   |   |   |   |   | | 
      | Header | Header | Header | Header | Header | Hea| 
      |___________|___________|___________|___________|___________|____|     
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
      |   |   |   |   |   | | 
      |   |   |   |   |   | | 
      |___________|___________|___________|___________|___________|____| 
       ____________________________________________________________ 
      |<|____________________________________________________________|>| 

     1.1.2 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo 
      orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non 
      rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus 
      neque mattis risus. 

2 Section Header 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus 
    tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae 
    justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus. 

    2.1 Question Header 

     Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae 
     arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie. 
     Donec ut fermentum ligula. 

큰 숫자는 내용을 오른쪽으로 더 밀어 넣는 것이 좋습니다.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

콘텐츠를 정렬해도 괜찮습니다. 이것은 중첩 테이블 대신 하나의 복잡한 테이블을 사용하여 쉽게 달성 할 수 있어야합니다.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

는 그 다음 번호는 마우스 오른쪽 정렬 할 수도 있지만 생각 왼쪽으로 정렬 외모 아마도 더 나은 - 숫자의 길이는 크게 변화하지 않는다.

1 Section Caption 
    1.1 Question Caption 
10 Section Caption 
    10.1 Question Caption 

그래서 문제의 본질은 나란히 요소 (2) 및 (3) 측에 배치하고, 그 콘텐츠가 크기 데있다. 어떤 아이디어? DIV와 DIV보다 선호되는 중첩 된 순서 목록을 사용하는 의미 상 정확한 솔루션은 테이블보다 약간 선호됩니다.

Answer 1

트릭이 유용한가요?

CSS

div { 
    border: #000 solid 1px; 
    padding: 2px; 
    min-height: 20px; 
    min-width: 12px; 
    position: relative; 
} 

HTML

<div style="width:300px;"> 
    <div> 
     <div style="position:absolute;"></div> 
     <div style="margin-left:20px;"> 
      <div></div> 
      <div></div> 
      <div> 
       <div style="position:absolute;"></div> 
       <div style="margin-left:20px;"> 
        <div></div> 
        <div></div> 
        <div> 
         <div style="position:absolute;"></div> 
         <div style="margin-left:20px;"> 
          <div></div> 
          <div></div> 
          <div></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

당신이 매우 빠르게 http://jsfiddle.net/nemophrost/Zrabg/ 당신은 정말이 매우 유용 트릭을 볼 수

Answer 2

1 단계는 좋은 doctype을 고르는 것입니다. HTML Strict는 올바르게 사용하면 멋지게 보입니다.

2 단계는 재설정 스타일 시트를 사용하거나 명시 적으로 div 설정을 지정하여 디스플레이에서 브라우저 준수의 마지막 비트를 얻는 것입니다.

3 단계는 Divs와 테이블의 조합이 필요하다는 것입니다. 당신은 그 경로를 시작했지만 doctype 문제로 인해 테이블이 제약을받지는 않았습니다. 다시 시도하십시오. 아이템 3이 너비를 초과하면 2보다 아래로 떨어지지 않게하는 유일한 방법 일 것입니다.