如何浮动一个元素离开包装器的完整高度？

本文介绍了如何浮动一个元素离开包装器的完整高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ HTML： < div class =wrapper> < div class =left> Foo < / div> < div class =right> 文本行1 < / div> < / div> < div class =wrapper> < div class =left> Foo Bar < / div> < div class =right> 文本行1< br> 文本行2< br> 文本行3 < / div> < / div> CSS： code> .wrapper { overflow：hidden; } .left { width：80px; float：left; height：100％; } 如何给浮动div包装的完整高度 测试： http://jsfiddle.net/Q6B43/ 解决方案 code> display：table 解决方案 在表格中，每行的单元格高度相同。 .wrapper { display：table; width：100％; } .left，.right { display：table-cell; } 这是我认为最好的解决方案，但IE8之前不兼容。 以下是此解决方案的小提琴。 / p> 使用绝对定位 绝对定位元素尊重其相对父项 height ： .wrapper { position：relative; padding-left：85px; } .left { position：absolute; left：0; top：0; } 通常我会不情况。但是，由于你有一个固定的宽度反正，也许没有关系。但请注意，这将忽略 .left 中的长内容。高度只是由 .right 控制。 这里是更新到您的小提琴。 flex ible解决方案 这是新的，我不建议现在使用它，但只是完整。您可以使用CSS3 flex ： .wrapper {显示：flex; } 小提琴（在目前的Chrome和Firefox中测试）。 HTML:<div class="wrapper"> <div class="left"> Foo </div> <div class="right"> Text row 1 </div></div><div class="wrapper"> <div class="left"> Foo Bar </div> <div class="right"> Text row 1<br> Text row 2<br> Text row 3 </div></div>CSS:.wrapper { overflow:hidden;}.left { width:80px; float:left; height:100%;}How can I give the floating div the full height of the wrapper (whose height is varying)?is it possible without jQuery?Test: http://jsfiddle.net/Q6B43/ 解决方案 The display: table solutionWithin tables each cell of a row has the same height..wrapper { display: table; width: 100%;}.left, .right { display: table-cell;}This is the best solution in my opinion, but is not compatible before IE8.Here is the Fiddle for this solution.Using absolute positioningAbsolute positioned elements respect their relative parents height:.wrapper { position: relative; padding-left: 85px;}.left { position: absolute; left: 0; top: 0;}Normally I would not recommend absolute positioning in most situations. But as you have a fixed width anyway, maybe it does not matter. But be aware of the fact that this will ignore long contents in .left. The height is just controlled by .right.Here is an update to your Fiddle.The flexible solutionThis is so new I would not recommend using it right now, but just to be complete. You could use CSS3 flex:.wrapper { display: flex;}The Fiddle (tested in current Chrome and Firefox). 这篇关于如何浮动一个元素离开包装器的完整高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..