如何阻止內容流入正確的div

我創建了一個雙列div，但是當左側div上的文本比右側div更多時，它下面的行會被推送到右側div中。如何阻止內容流入正確的div

我怎麼沒有文本流到正確的div？

<div id="wrapper-industry"> 
<div id="wrapper-form"> 
    <div id="form_row"> 
     <div class="form_cell1"> 
      <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p> 
     </div> 
     <div class="form_cell2"> 
      <img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" /></div> 
    </div> 
</div> 
<div class="industry-intro rtecenter"> 
    <p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p> 

     </div> 
    </div>

來源

2014-01-06 user3075987

這裏的CSS：＃包裝行業{ \t寬度：916px; margin：0 auto; 填充：0; } ＃wrapper-form { position：relative; 寬度：100％; border：none; margin：43px 0 5px 0; } #form_row { height：100％; white-space：nowrap; } .form_cell1 { height：100％; 寬度：60％; display：inline-block; 空格：正常; float：left; } .form_cell2 { height：100％; 寬度：40％; display：inline-block; 空格：正常; } 。業內-介紹{ 保證金：0 0 30像素30像素; } – user3075987

你的意思是你需要你的文字是否合理？ – Beep

你需要清除浮動

<div style="clear: both"></div>

小提琴here

來源

2014-01-06 23:13:54 McAden

你已經有display:inline-block;工作，並且要在應用列蘋果下面的文字。 ..所以只需移動你的HTML，殺死float:left;，你是金。

Here is an updated jsFiddle, with tweaks to HTML structure and CSS.

<div id="form_row"> 
     <div class="form_cell1"> 
      <p>Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu. Lorem ipsum dolor sit amet, usu quis malis qualisque eu, vitae deleniti cum ne. Agam patrioque in sit, no usu erant docendi gubergren. Viris tritani molestie sea id, duo no meis partem. Per ut quot mnesarchum. Ut diam voluptatum instructior vim, agam natum dolorum in mei. Ferri electram sea ne. Simul laboramus ad nec. Ei pro animal disputando, harum platonem no pri. Ius meis apeirian necessitatibus ad, ut eripuit sensibus mei. Doming integre sea te, cum ad atomorum democritum. Malis omnes utamur mea no. Vis discere alterum maiestatis ea, periculis torquatos mei ut. Error scaevola ut quo, ad pri impetus noluisse probatus. Vix eu veniam semper. Ei cibo inani his. Ut assum eirmod forensibus quo. Homero scriptorem mei no. Eruditi atomorum usu cu. His an adhuc scaevola, quis ancillae persequeris eu cum, est wisi mundi maluisset eu.</p> 
     </div><div class="form_cell2"> 
      <img height="347" src="http://www.earthtimes.org/newsimage/eating-apples-extended-lifespan-test-animals-10-per-cent_183.jpg" style="display:block; margin:0 auto;" width="385" /> 
     <div class="industry-intro rtecenter"> 
      <p>This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column. This text is going into the Apple column.</p> 
     </div> 
    </div> 
     </div> 
    </div> 
</div>

通知我消除.form_cell1和.form_cell2之間的空白，這允許display:inline-block;元件以不越過100％的寬度。

來源

2014-01-06 23:28:10 PlantTheIdea

如何阻止內容流入正確的div

回答

相關問題