如何在css中实现多列布局
这篇“如何在css中实现多列布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何在css中实现多列布局”文章吧。
创新互联长期为1000多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为拜城企业提供专业的成都网站设计、做网站，拜城网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
一. 定宽 + 自适应
期望效果: 左侧宽度固定, 右侧宽度自适应
公共代码:
html:
left menu
right item1
right item2
right item3
css:
html, body, p, ul, li {
margin: 0;
padding: 0;
}
div.left {
background: #d2e3e3;
}
div.right {
background: #77DBDB;
}方案一: float
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px; // 或 overflow: hidden
}方案二: table
.parent {
display: table;
width: 100%;
table-layout: fixed; // https://blog.csdn.net/qq_36699230/article/details/80658742
.left, .right {
display: table-cell;
}
.left {
width: 100px;
}
}方案三: flex
.parent {
display: flex;
.left {
width: 100px; // 或 flex: 0 0 100px;
}
.right {
flex: 1;
}
}两(多)列定宽 + 自适应 布局使用上述方案均可, 对于中间一列的设置与第一列保持一致即可
不定宽(两列或多列) + 自适应 布局使用上述方案均可, 对于中间一列的设置与第一列保持一致即可, 不同的是不需要特别设置宽度, 需要特别注意的是使用table布局时的情况, 如下:
.parent {
display: table;
width: 100%;
// 设置table-layout: fixed; 会使单元格等宽, 因此此处不设置
.left, .right {
display: table-cell;
}
.left {
width: 0.1%; // 宽度设置一个极小值, 由于没有设置table-layout: fixed; 所以宽度由内容决定
white-space:nowrap;
}
}二. 等宽(两/多列)布局
公共代码:
html
1
