2

float 配合简单的 html 结构实现三栏布局

HTML 结构如下

<div class="outer">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div>

CSS 代码,重点在于 overflow: hidden; 实现中间栏宽度自适应

.outer {
    height: 100px;
    border: 1px solid #000;
}
.outer > div {
    height: 100%;
}

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
    background-color: #f00;
}

.right {
    float: right;
    width: 100px;
    margin-left: 20px;
    background-color: #00f;
}

.middle {
    background-color: #000;
    overflow: hidden;  /*重点*/
}

june
842 声望24 粉丝

飞书内推:[链接]


下一篇 »
mac 卸载 node