는 키가 하나

Question

위의 바닥에 두 개의 div의를 정렬하면 내가 달성하고 싶은의 모형입니다.

나는 각 div의 하단에 강력한 회색 규칙이있는 행의 맨 아래에 정렬해야하는 div의 두 개의 다른 행이 있습니다. 이러한 회색 규칙은 수평으로 정렬해야합니다.

가장 큰 문제는 WordPress 테마이므로 각 div는 콘텐츠 양에 따라 세로로 확장하고 축소 할 수 있어야한다는 것입니다. 즉, 왼쪽에 .description의 키가 커지면 .page-title 및 .sidebar은 회색 규칙이 정렬되도록 조정해야합니다. 이렇게하면 고정 된 높이를 사용하지 못하게되어 시스템을 파악할 수 있습니다.

내 용액 제 절대 및 상대 배치의 조합을 이용 하였다 : position: relative 두 컨테이너 div, .row-1 및 .row-2 모두를 사용하고, 추가 position: absolute; bottom: 0;. 그래도 float 또는 left : 0,/right : 0; 0을 사용하는지 여부에 관계없이 각 .row- div에 고정 된 높이를 지정하지 않아도 작동하지 않는 것 같습니다. 개별 div를 배치합니다.

내가 생각할 수있는 유일한 해결책은 JavaScript를 사용하여 가장 큰 div의 높이를 얻고 여백을 적절하게 조정하는 것이지만 스타일에 JavaScript를 사용하지 않으려 고합니다. 내가 누락 된 더 나은 해결책이 있습니까?

Answer 1

CSS 프레임 워크를 사용하면 손쉽게 사용자 정의 할 수 있으며 사용하기가 쉽습니다. 960.gs 또는 blueprintcss.org을 사용해보십시오. 960 프레임 워크를 사용할 수있는 많은 다른 버전이 있습니다.

저는 다른 사람들보다 덜 복잡하기 때문에 960을 개인적으로 제안합니다.

<div class="grid_7 prefix_1"> 
    <div class="grid_2 alpha"> 
     ... 
    </div> 
    <div class="grid_3"> 
     ... 
    </div> 
    <div class="grid_2 omega"> 
     ... 
    </div> 
</div> 
<div class="grid_3 suffix_1"> 
    ... 
</div> 

고정 폭의 4 열입니다.

Answer 2

당신은 변경하지 않고 여분의 내용을 표시 할 수있는 스크롤 막대를 줄 수 있도록 고정 된 크기의 수뿐만 아니라 다음 CSS 속성 overflow:scroll 또는 overflow:auto를 사용하는 내용의 양에 대한 동적으로 그것을 필요로하는 .description 사업부가 필요한 경우 div의 크기

사이드 바에 대해서도 float:right으로 지정하고 행 2 div 앞에 배치하면 오른쪽에 배치됩니다. 행 2 div와 내용 div는 세로로 길어 지거나 길이가 고정되어있는 한 왼쪽 옆에 나타납니다.

Answer 3

이것은 일반적인 CSS 문제이며 완벽한 해결책은 없습니다.

내가 아는 것 중 가장 좋은 것은 당신이 말한 것입니다 : 용기를 '위치 : 상대'로 만들고 아이들은 position: absolute; top:0; bottom:0;입니다.

실제로 어린이가 떠 다니는 경우 흐름이 흐려 지므로 컨테이너의 높이를 높이려면 clearfix이 필요합니다.