div 요소를 수레를 사용하여 나란히 정렬

Question

저는 주로 백엔드 개발자이지만 오른쪽에서 레이아웃을 얻으려고합니다. 기본적으로 필터 집합 (드롭 다운 목록, 확인란 등)이있는 왼쪽에 div 태그가 포함 된 목록보기 페이지를 만듭니다. 화면의 오른쪽에는 그리드가 포함 된 div 태그가 있습니다. 이것은 작동하고있는 것처럼 보이지만 오버 헤드가 있거나 화면이 최대화되지 않을 때 끔찍한 것처럼 보입니다. 이 일을 제대로하고 있습니까? 기본적으로 여기 난 후 나는 무엇을 :

.filterContainer { 
    width:20%; 
    float:left; 
} 


.gridContainer { 
    width:79%; 
    float:right; 
} 

은 기본적으로 .filterContainer 내이 div (dLeft)를 왼쪽 .gridContainer 내입니다 :

나는이만큼 간단이를 위해 수행했던 CSS 오른쪽 div (dRight)입니다. 이것이 내가 성취하려고하는 것에 유효합니까? 그 결과는 여기에 표시됩니다 :

http://i.imgur.com/WFasMF1.png

그러나, 나는 내 창의 크기를 조절하면 내가 다음과 같은 결과로 끝날 : 내가 크기를 조정하고 있습니다 때문에 추측

http://i.imgur.com/4u9HRlK.png

정상입니다 ,하지만 내 CSS는 유효합니까?

Answer 1

첫째, 항상 당신이 사용하도록

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

    /* Resets */ 
    margin: 0; 
    padding: 0; 
} 

참고 : * 모든에 정의 속성을 적용하는 보편적 인 선택에 불과하다 요소. 특정 요소를 대상으로 중위

지금, 왜 당신이 필요

, div.class_name 등과 같은보다 구체적인 선택기를 사용합니까?

아래 그림에서 볼 경우 ..

CSS는 당신이 조각을 사용 그렇게 할 때, 기본 콘텐츠 상자 동작 인, 내부, marginpadding 및 상자 외부 border 아니라 추가 공유 했으므로 상자 모델 동작을 변경하고 요소 내부에서 border 및 padding을 계산합니다.

---

문제에오고, 사용자가 제공 한 CSS는 float, 또는 margin 또는 지워지지 않은 부동 요소 완벽하지만 position 당신이 변경 고려할 수 있습니다, 그래서 만약 당신이 직면하고있는 문제를 일으킬 수 있습니다 아무것도 당신의 CSS 스타일 시트, 당신은 box-sizing: border-box;

---

를 사용하는 경우 가치가있을 것입니다 당신은 어떻게 이것을 달성합니까?

은

음, 분명히, 나는 당신에게 모든 것을 제공하지 않습니다,하지만 난 당신이 width: 79%;을 사용하는 참조 지금 내가하는 방법을 제안 이유의 매우 강한 이유입니다으로,이를 달성하는 방법에 그냥 일반적인 생각 상자 모델을 변경하십시오.

여기 왼쪽에는 두 개의 요소가 떠 다니며 상자 모델이 변경되어 있으므로 요소 중 하나에 -1% 을 사용할 필요가 없습니다. 간격이 필요할 때 격자 안쪽에 더 많은 블록을 중첩 한 다음 margin 대신에 특히 부동 소수점 요소에 padding을 사용하십시오.

Demo

<div class="wrap"> 
    <div class="left_wrap"></div> 
    <div class="right_wrap"></div> 
</div> 

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

    /* Resets */ 
    margin: 0; 
    padding: 0; 
} 

.wrap:after { 
    clear: both; 
    display: table; 
    content: ""; 
} 

.wrap > div { 
    min-height: 300px; 
} 

.wrap .left_wrap { 
    width: 30%; 
    float: left; 
    border: 3px solid #f00; 
} 

.wrap .right_wrap { 
    border: 3px solid #000; 
    width: 70%; 
    float: left; 
} 

Answer 2

왼쪽 컨테이너를 고정 폭으로 설정하면 도움이됩니다. 그리고 당신이 원한다면 항상 당신이 최대 너비를 설정 다른 div에 두 div를 포장하실 수 있습니다. 당신은 그리드 기반의 레이아웃을 처리 할 때 모든

Answer 3

어쩌면 당신은 position:absolute를 사용할 수 있습니까?

또는 설계된 용도로 table 태그 만 사용 하시겠습니까? 가까운 장래에 W3C가 해당 태그를 삭제할 계획은 아닙니다.

정상적인 블록 전에 배치되고 정상적인 부모 컨테이너 컨텍스트를 사용하지 않기 때문에 블록의 일반적인 동작이 아닙니다. 블록이 플로팅되었습니다.

Answer 4

프레임 세트를 사용하여 페이지를 프레임으로 나눈 다음 스타일에 CSS를 추가 할 수 있습니다.