div 大小不计入右浮动元素

Question

我想要这样的内容

News Event Title                     11.11.2015
-----------------------------------------------
News Event Title 2345 News Event Title 2345 
                                     11.11.2015
-----------------------------------------------
News Event Title News Event Title News Event Ti
tle                                  11.11.2015

结果变成这样

News Event Title                     11.11.2015
-----------------------------------------------
News Event Title 2345 News Event Title 2345
----------------------------------------------- 
                                     11.11.2015
News Event Title News Event Title News Event Ti
tle                                  11.11.2015

请注意实际结果中的第二个标题。这是因为日期是 float: right 并且不计入 div 大小。

如何解决？感谢您的帮助

代码就像

<div style="border-bottom:1px dotted #000000;">
<p>News Event Title<span style="float:right;">11.11.2015</span></p>
</div>

更新：

请看演示站点，左下角

更新

溢出：隐藏问题解决。非常感谢

Answer 1

add clear:both in end of it like this

<div style="border-bottom:1px dotted #000000;">
<p>News Event Title<span style="float:right;">11.11.2015</span></p>
</div> 
<div style="clear:both"></div>

Answer 2

为了获得最佳实践，您应该这样做：

<div style="border-bottom:1px dotted #000000;">
<p style=" margin-bottom:0;">News Event Title</p>
<div style="display:block; text-align: right;">11.11.2015</div>
</div>

DEMO HERE

Answer 3

您可以在父 div 上添加 overflow: hidden;。

div 大小不计入右浮动元素

The div size did not count in the float right element

html

css

layout

css-float