레이아웃을 위해 CSS를 사용하여 다음 줄에 대한 float 삭제? 2 열과 5 행의 레이아웃을 생성해야합니다.

Question

테이블이 아닌 DIV를 사용하여 레이아웃을 만들었습니다. 그것은 작동하고있는 것 같습니다 ... 나는 각 항목과 열로 구성된 div 후에 아무 것도 분명히해야했습니다.

하지만 나머지 두 열이 시작되기 전에 각 2 열 아래에 여분의 줄이 생깁니다. 내가 아래에 내 코드를 지출 할 것입니다, 내가 뭘 잘못하고있는거야? ... 내가 뭘하고 싶은 레이아웃과 같은 div를 사용하여 5 행과 각 행을 2 열로 구성되어 있습니다.

<div id="column1" style="float:left;width:200px;">1st Title</div> 
<div id="container1" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div> 
<div style="clear:both;"></div> 
<div id="column2" style="float:left;width:200px;">2nd Title</div> 
<div id="container2" style="float:left;"> <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList></div> 
<div style="clear:both;"></div> 

Answer 1

다음은 문제를 없애는 CSS 클래스입니다.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0px; 
    clear: both; 
    visibility: hidden; 
} 

Answer 2

나는 당신이 당신의 containerdiv들에 columndiv s의 clear: left 및 clear: right를 추가하여 같은 효과를 얻을 수 있습니다 확신 해요.

편집 사실 : 은 column으로 충분하지만, 그렇다면 float를 사용하여 테이블과 같은 레이아웃을 만드는 것이 쉽고 결코 불가능할 것입니다.

Answer 3

왜 표시 속성보다는 플로트, 예를 들어, 사용하지 마십시오 div의 div를 그룹 "행"으로 그룹화해야합니다.

.row { 
    display: table-row; 
} 

#column1, #container1, #column2, #container2 { 
    display: table-cell; 
}