떠 다니는 div의 두 번째 행을 아래로 내림

Question

2 개의 행이 있습니다. 모든 div가 왼쪽으로 떠 있지만 두 번째 행과 앞으로의 모든 행이 앞에있는 행 다음에 놓여 지길 원합니다. 바이올린에서 첫 번째 설명이 길 경우 두 번째 설명이 첫 번째 내용으로 어떻게 실행되는지 주목하십시오. http://jsfiddle.net/wyc112y8/

CSS

.dataleft { 
float:left; 
} 
.pushdown { 
    margin-bottom:40px; 
} 
.thedatadescr { 
margin-top:8px;text-transform:Capitalize;font-size:13px;width:300px; 
} 

.thedata { 
margin-top:8px;text-transform:Capitalize;width:300px; 
} 
.thedatahalf { 
margin-top:8px;text-transform:Capitalize;width:145px;text-align:left; 
} 

html로 당신은 당신의 CSS에서 같은 것을 사용해야

<div id="wraprow1" class="pushdown"> 
<div id="data-date" class="dataleft thedatadescr fontr" style="">long descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong descriptionlong description</div> 
<div id="data-company" class="dataleft thedatahalf fontr" style="margin-left:5px;">$12</div> 
<div id="data-company" class="dataleft thedatahalf fontr" style="margin-left:9px;">100</div> 
</div> 


<div id="wraprow2" class="pushdown"> 
<div id="data-date" class=" thedatadescr fontr" style="">Second description</div> 
<div id="data-company" class="dataleft thedatahalf fontr" style="margin-left:5px;">$12</div> 
<div id="data-company" class="dataleft thedatahalf fontr" style="margin-left:9px;">100</div> 
</div> 

Answer 1

:

여기 내 바이올린입니다.

.pushdown { 
    display: inline-block; 
    margin-bottom: 40px; 
}