CSS的两列布局怎样使用

发布时间：2023-12-28 21:38:18 所属栏目：语言来源：DaWei

导读： 这篇文章主要给大家分享CSS布局的内容，CSS布局是很基础的内容，熟练掌握还是很有必要的。本文给大家介绍两列布局的使用，这两种布局都是比价常用的，而且使用也很多。接下来就跟随小编学习

这篇文章主要给大家分享CSS布局的内容，CSS布局是很基础的内容，熟练掌握还是很有必要的。本文给大家介绍两列布局的使用，这两种布局都是比价常用的，而且使用也很多。接下来就跟随小编学习一下吧。

两列布局
左列定宽，右列自适应

1.float + margin 布局
html 代码
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css 代码：
#left {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
margin-left: 200px; /* 大于或等于左列的宽度 */
height: 400px;
background-color: lightgreen;
}

2.float + overflow 布局
html 代码
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css 代码
#left {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}

3.绝对定位布局
html 代码：
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
position: relative;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 400px;
background-color: lightgreen;
}

4.table 布局
html 代码：
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
width: 100%;
height: 400px;
display: table;
}
#left,
#right {
display: table-cell;
}
#left {
width: 200px;
background-color: lightblue;
}
#right {
background-color: lightgreen;
}

5.flex 布局
html 代码：
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
width: 100%;
height: 400px;
display: flex;
}
#left {
width: 200px;
background-color: lightblue;
}
#right {
flex: 1;
background-color: lightgreen;
}

6.grid 网格布局
html 代码：
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
width: 100%;
height: 400px;
display: grid;
grid-template-columns: 200px auto;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
左列不定宽，右列自适应

左列盒子宽度随着内容增加或减少发生变化，右列盒子自适应

7.float + overflow 布局
html 代码：
<body>
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</body>

css 代码：
#left {
float: left;
height: 400px;
background-color: lightblue;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}

8.flex 布局
html 代码：
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
display: flex;
height: 400px;
}
#left {
background-color: lightblue;
}
#right {
flex: 1;
background-color: lightgreen;
}

9.grid 布局
html 代码：
<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

css 代码：
#parent {
display: grid;
grid-template-columns: auto 1fr;
height: 400px;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}

（编辑：财气旺网 - 财气网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!