2013-10-26 37 views
0

见的jsfiddle:http://jsfiddle.net/yYAD7/2/H1下面扩大浮动元素

有谁知道为什么h1元素正在不断扩大下面的浮箱? h1中的文本正确流动。内嵌块不是解决方案,因为我希望边框底部直到盒子的开始处都展开。一个'丑陋'的解决方案是用左边框替换div.right的左侧边框,并将左边框的颜色设置为与背景相似,但是有人有更清晰的解决方案吗?

<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; } 

谢谢!

回答