<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 多列布局 一列定宽另一列自适应 (1) float + margin 兼容性有点问题,IE7以后,没问题 IE6有问题,有3像素的问题,可以通过hack解决。 <style type="text/css"> .left {float: left; height:30px; width: 100px; background-color: #ccc;} .right {margin-left:110px; background-color: #369;} </style> (2) float + margin + fix 优点,兼容性很好, 缺点,结构多一点。 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div> <style type="text/css"> .left { float: left; width: 100px; background-color: #999; position: relative; /*提高层级,否则无法选中其中的元素,因为fix在后面*/ } .right-fix { float: right; width:100%; background-color: #ddd; margin-left:-100px; } .right { margin-left:110px; background-color: #369; } </style> (3)float + overflow 缺点IE6,不行 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style type="text/css"> .left { float: left; width: 100px; margin-right: 20px; background-color: #999; } .right { overflow: hidden; /*触发bfc,bfc模式与外界隔离*/ background-color: #ddd; } </style> (4)table <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style type="text/css"> .parent { display: table; width: 100%; table-layout: fixed; /*两个好处(1)加速table渲染,实现布局优先。*/ background-color: #999; } .left, .right { display: table-cell; background-color: #eee; } .left { width: 100px; background-color: #369; padding-right: 20px; } </style> (5)flex 兼容性问题。性能稍微差一点,小范围布局。 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> <style type="text/css"> .parent { display: flex; } .left { background-color: #369; left: 100px; margin-right: 20px; } .right { flex : 1; /*1 1 0; 剩余宽度都给了右边*/ background-color: #eee; } </style> 多列定宽,一列自适应 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="center"> <p>center</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> ------------1--------------- <style type="text/css"> .parent { display: flex; } .left, .center { background-color: #369; left: 100px; margin-right: 20px; } .right { flex : 1; /*1 1 0; 剩余宽度都给了右边*/ background-color: #eee; } </style> ------------2--------------- <style type="text/css"> .left, .center { background-color: #369; float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; background-color: #eee; } </style> 多列布局 <div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div> 左右自适应 (1) float + overflow <style type="text/css"> .left { background-color: #369; float: left; margin-right: 20px; } .right { overflow: hidden; background-color: #eee; } </style> (2) table <style type="text/css"> .parent { display: table; width: 100%; table-layout: fixed; } .left, .right { display: table-cell; } .left { width: 100px; padding-right: 20px; background-color: #369; } .right { background-color: #eee; } </style> (3)flex <style type="text/css"> .parent { display: flex; } .left { width: 200px; margin-right: 20px; } .right { flex:1; background-color: #369; } </style>
时间: 2024-08-10 02:09:04