两列布局及两列等高布局总结

[yangbo5207]

Layout

关于布局的总结

两列布局

一列宽度固定，另一列宽度自适应 示例

<!-- html 部分 -->
<div class="box">
    <div class="left">left</div>
    <div class="right">box</div>
</div>

/* css */
.box { 
    width: 100%;
    background: orange;
    overflow: hidden;
    border: 5px solid pink;
    box-sizing: border-box;
}
.left {
    width: 20%;
    float: left;
    /* 在实际应用中，高度一般由内容撑开 */
    height: 200px;
    background-color: #333;
    color: #fff;
    font-size: 40px;
    line-height: 200px;
    text-align: center;
}
.right {
    /* width自适应高度，或者设置为80%, 高度由内容撑开 */
    height: 230px;
    /* 右侧与左侧分离的关键，原理可查看BFC */
    overflow: hidden;
    color: #fff;
    background-color: #666;
    font-size: 40px;
    line-height: 230px;
    text-align: center;
}

点击查看示例运行效果 点击查看两列布局在实际应用中的一个小例子

• 当子元素都为浮动元素，或者浮动元素为高度最高的元素时，父元素会出现高度坍塌的问题，解决方法
• 点击查看使用清除浮动解决高度坍塌的例子

// 根据BFC原理
overflow: hidden;
// ----------------------
// 或者根据清除浮动原理
.box:after {
    content:'';
    display: block;
    height:0;
    clear: both;
    /* IE下唤醒hasLayout */
    zoom: 1;
}

两列等高布局

两列等高布局总的来说分为两种情况，一种为仅仅只需要实现视觉上的等高，另外一种就是实现真正意义上的等高，市面上流传的各种方法几乎都是只能实现视觉上的等高布局，到底我们能不能实现真正意义的等高呢？先看例子。

视觉上的等高布局

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

/* 仅为关键属性，完整请点击下方链接查看 */
.box {
    overfolow: hidden;
}
.left {
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.right {
    overflow: hidden;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

点击查看完整示例 其他方式实现视觉等高

• 通过设置背景样式实现
• 更多实现方式

真正意义上的高度相等 除了配合js之外，实现高度相等可以借助css3的新属性，display:flex

<div class="box">
    <div class="ch1">1</div>
    <div class="ch2">2</div>
    <div class="ch3">3</div>
    <div class="ch4">4</div>
</div>

.box { display: flex; }
.ch1 { width: 20px; }
.ch2 { flex-grow: 2; }
.ch3 { flex-grow: 1; }
.ch4 { flex-grow: 1; }

点击查看完整代码 由于低版本浏览器并不支持这个属性，因此会有兼容性的问题，如果想要查看哪些浏览器支持了这些属性，请点击flex兼容性以及其他属性查看 属性-->伸缩盒。