向下推第二行以显示向左浮动的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

 <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

你必须在你的CSS中使用这样的东西。

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