다른 div 2 열 레이아웃

StackOverflow https://stackoverflow.com/questions/445401

  •  22-07-2019
  •  | 
  •  

문제

이는 단순한 2열 레이아웃과 다릅니다.

이 HTML이 필요합니다.

<div class="menu">
    <div class="right">One</div>
    <div>Three</div>
    <div>Four</div>
    <div class="right">Two</div>
    <div class="right">Two</div>
    <div>Four</div>
    <div class="right">Two</div>
</div>

div 클래스 메뉴에는 정적 너비가 있으므로 오른쪽 열에 들어가려면 내부의 div가 필요하고 그대로 유지하려면 일반 div가 필요합니다.

지금까지 얻은 CSS는 다음과 같습니다. 하지만 아직 알아낼 ​​수 없는 것 같습니다.

div.menu {
    width: 550px;
}
div.menu div {
    float: left;
    width: 200px;
}
div.menu div.right {
    float: right;
}

내부의 div는 임의의 순서를 가지므로 div에 포함하여 플로팅할 수 없습니다.

다음은 위 HTML 코드의 대략적인 모습입니다.

대체 텍스트 http://img102.imageshack.us/img102/4494/flytc3.jpg

도움이 되었습니까?

해결책

노력하다: 

div.menu div {
    float: left;
    clear: left;
}
div.menu div.right {
    float: right;
    clear: right;
}

다른 팁

나는 당신이 달성하려는 것이 무엇인지 알 수없는 것 같습니다.MS Paint 등에서 기본 스케치를 만들어 주시면 도움을 드릴 수 있습니까?

편집하다:어쩌면 여기서 뭔가 이해가 안 될 수도 있지만 이것이 바로 내 Chrome 창에 표시되는 방식입니다(패딩은 제외).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top