Question

参见JSFiddle：http://jsfiddle.net/yYAD7/2/

有谁知道为什么h1元素在浮动框下方扩展？ h1中的文本正确流动。内联块不是一个解决方案，因为我希望边框底部扩展到框架的开头。一个'丑陋'的解决方案是用border-left替换div.right的左边距，并将左边框的颜色设置为类似于背景，但maby有人有更清洁的解决方案？

<div class="box">
<div class="right">h2 border-bottom expands below this box </div>
<h1>This is a a rather long title, the text does flow correctly</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lectus at turpis iaculis aliquam. Donec luctus tellus eget orci mollis eleifend. Fusce ultrices consequat nulla nec vestibulum. Mauris vel accumsan dolor. Mauris porttitor libero leo, in sagittis sapien congue ac. Aliquam hendrerit blandit ornare. Vivamus varius egestas tortor, eget blandit libero faucibus id. Praesent id tellus diam.</p>
<div class="clear"></div>
</div>


.box { width: 500px; padding: 5px; border: 1px solid #000; }
.right { float: right; width: 100px; height: 160px; padding: 20px 0; background: #ccc;     
font-size: 11px; opacity:0.8; filter:alpha(opacity=80); text-align: center; }
h1 { border-bottom: 2px solid #000; margin-top: 0px;}
.clear { clear: both; }

谢谢！

Answer 1

margin-right: 110px上的

h1很好：http://jsfiddle.net/evENv/

Answer 2

display: inline;上的{p> h1应该可以解决问题......

示例：http://jsfiddle.net/yYAD7/3/

h1在浮动元素下方扩展

2 个答案: