Question

我创建了一个两列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>

Answer 1

你需要清除你的浮动

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

小提琴here

Answer 2

您已经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％的宽度。

如何阻止内容流入正确的div

2 个答案: