当前位置：凯发k8官方网 > 前端技术 > css >内容正文

css

八十八、css两列三列的布局方式 -凯发k8官方网

发布时间：2024/10/8 css 0 豆豆

凯发k8官方网收集整理的这篇文章主要介绍了八十八、css两列三列的布局方式小编觉得挺不错的,现在分享给大家,帮大家做个参考.

@author：runsen

2020/11/30、周一、今天又是奋斗的一天。

文章目录

两列布局
- 左边定宽，右边自适应
- 弹性布局，flex实现
- 表格方式
三列布局
- 左边左浮右边浮动中间定宽
- flex 布局

左边定宽，右边自适应

想到的就是 float margin 来实现两列布局，首先实现左栏定宽，主内容自适应的两栏布局。

float margin 和absolute margin 方式完全一样。

实现思路：

1.先设置左边的宽度，让盒子左浮动；
2.设置右边的盒子，margin-left: 左边盒子的宽度。

<head><style>#left {/* 定宽 */width: 400px;height: 300px;background-color: #c9394a;/* 当前元素脱离文档流 */float: left;/* 也可以用 position: absolute; */}#right {background-color: #cccccc;margin-left: 400px;height: 300px;}style> head> <body><div id="left">div><div id="right">div> body>

但是网上说定宽元素浮动与自适应浮动元素不浮动存在兼容的问题。

弹性布局，flex实现

flex布局实现关键点解析

父元素设置display:flex;和justify-content:space-bettween;(两端对齐)
父元素根据需要设置align-item:center;以实现垂直居中
图片固宽元素不需要特殊设置，宽高即可
流体文案设置flex:1;自动分配剩余空间。

flex布局本来就是设计来自适应的，只需要用上flex: 1;，就能让right分到parent的宽度减去left的宽度。

<head><style>#parent {display: flex;/* justify-content: center;align-items: center; */}#left {width: 200px;height: 100px;background: #245524;}#right {flex: 1;height: 100px;background: #785778;}style> head><body><div id="parent"><div id="left">div><div id="right">div>div>body>

表格方式

<head><style>#parent {/* 表格的单元格的宽度会自动分配 */display: table;/* table-layout: fixed; */width: 100%;}#left {/* 定宽 */width: 400px;height: 300px;display: table-cell;background-color: #c9394a;}#right {height: 300px;display: table-cell;background-color: #cccccc;}style> head><body><div id="parent"><div id="left">div><div id="right">div>div> body>

左边左浮右边浮动中间定宽

左边左浮右边浮动中间定宽也就是流体布局

<html lang="en"> <head><style>.left {float: left;height: 200px;width: 100px;background-color: red;}.right {width: 200px;height: 200px;background-color: blue;float: right;}.main {margin-left: 120px;margin-right: 220px;height: 200px;background-color: green;}style> head> <body><div class="container"><div class="left">div><div class="right">div><div class="main">div>div> body> html>

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

flex 布局

flex 布局中的flex: 1就是自定义布局。下面代码是左右固定，中间自适应

.container{display: flex;height: 300px;}.left{width: 100px;background-color: red;}.middle{flex: 1;background-color: green;}.right{width: 100px;background-color: blue;}<div class="container"><div class="left">div><div class="middle">div><div class="right">div> div>

总结

以上是凯发k8官方网为你收集整理的八十八、css两列三列的布局方式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。