html - CSS の動的グリッド

Question

<div class="leftx">left one</div> 
<div class="rightx">right one<br><br><br></div> 
<div class="leftx">left two</div> 
<div class="rightx">right two</div> 


 .leftx{ 
float:left;
width:50%;
}

.rightx{
float:left; 
width:50%;
} 

こんにちは、上記のコードは下の画像のように出力されます。必要なのは、右側または左側にある場合でも<br>、別の側に影響を与えるべきではありません。

たとえば、左 1と左 2の間にブレーク スペースがあってはなりません。

例 ：

Answer 1

css clear を使用して、コードが次のようになるようにすることができます

.leftx {
float:left;    
clear: left;
width:50%;
}

.rightx {
float:right;
clear: right;
width:50%;
}

ここで見ることができます: http://jsfiddle.net/YphGr/