css实现三栏布局，两边定宽，中间自适应

1、利用定位实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}

.box>div{height: 100%;}

#box1{position: relative;}

.left1{position: absolute;top:;left:;width: 100px;background: yellow;}

.main1{background: #09c;margin: 0 100px 0 100px;}

.right1{position: absolute;top:;right:;width: 100px;background: yellow;}

dom结构如下：

<div class="box" id="box1">

    <div class="left1">左侧定宽</div>

    <div class="main1">中间自适应</div>

    <div class="right1">右侧定宽</div>

</div>

2、利用 display: flex 实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}

.box>div{height: 100%;}

#box2{display: flex;display: -webkit-flex;}

.left2{left:;width: 100px;background: yellow;}

.main2{background: #09c;flex:;}

.right2{right:;width: 100px;background: yellow;}

dom结构如下：

<div class="box" id="box2">

    <div class="left2">左侧定宽</div>

    <div class="main2">中间自适应</div>

    <div class="right2">右侧定宽</div>

</div>

3、利用 float 实现

css代码如下：

.box{overflow: hidden;height: 100px;margin: 10px 0;}

.box>div{height: 100%;}

.left3{float:left;width: 100px;background: yellow;}

.right3{float:right;width: 100px;background: yellow;}

.main3{background: #09c;margin: 0 100px 0 100px;}

dom结构如下：

<div class="box" id="box3">

    <div class="left3">左侧定宽</div>

    <div class="right3">右侧定宽</div>

    <div class="main3">中间自适应</div>

</div>

实现效果如下图：

需要注意的是最后一种方法的dom结构是有变化的，浮动元素要写在前面。

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。

巴特西

css实现三栏布局，两边定宽，中间自适应

css代码如下：

dom结构如下：

css代码如下：

dom结构如下：

css代码如下：

dom结构如下：

最新文章

热门文章