如何使浮动元素的边距折叠

Question

如何使这些浮动 div 的垂直边距折叠？

 .container { display: block; padding: 1px; max-width: 500px; } .float-left { display: block; float: left; margin: 20px; } .float-right { display: block; float: right; margin: 20px; } .center { display: block; text-align: center; margin: 20px; } .container * { outline: 2px solid red; box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.5); }

 <div class="container"> <div class="float-left">::::::::::::::::::::::FloatLeft::::::::::::::::::::::</div> <div class="float-right">::::::::::::::::::::::FloatRight::::::::::::::::::::::</div> <div class="center">::::::::::::::::::::::::::::Center::::::::::::::::::::::::::::</div> </div>

最后结果：

注意 .float-left、.float-right 和 .center 的行为应该是一样的，当改变 .container 的宽度时，即使有没有浮动的解决方案。

谢谢你。

Answer 1

我想到了：

 .container { display: block; padding: 10px; max-width: 500px; } .float-left { display: inline-block; float: left; margin: 10px; } .float-right { display: inline-block; float: right; margin: 10px; } .center { display: block; text-align: center; } .center_container { display: inline-block; margin: 10px; } body *:not(.center) { outline: 2px solid red; box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.5); } body .container { box-shadow: inset 0px 0px 0px 10px rgba(0,0,0,0.5); }

 <div class="container"> <div class="float-left">::::::::::::::::::::::FloatLeft::::::::::::::::::::::</div> <div class="float-right">::::::::::::::::::::::FloatRight::::::::::::::::::::::</div> <div class="center"> <div class= "center_container">::::::::::::::::::::::::::::Center::::::::::::::::::::::::::::</div> </div> </div>