css左边容器固定宽度，右边自适应的几种效果

最新推荐文章于 2023-08-13 09:34:53 发布

Cryday

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量4.9k

点赞数 1

本文链接：https://blog.csdn.net/Cryday/article/details/83621797

版权

内容代码如下：

第一种：

.left {
float: left;/*左浮动*/
width: 200px;
height: 100px;
border: 10px solid green;
}

.right {
overflow: hidden;
height: 100px;
border: 10px solid gold;
word-break: break-all; /*强制让内容换行*/
}

第二种：

.container{
overflow: hidden;/* 清浮动*/
}
.left {
float: left;/*左浮动，脱离文档流*/
width: 200px;
height: 100px;
border: 10px solid green;
}
.right {
margin-left: 220px;/*左边的margin*/
height: 100px;
border: 10px solid gold;
word-break: break-all; /*强制让内容换行*/
}

第三种：

.left {
position: absolute;/*左绝对定位，脱离文档流*/
width: 200px;
height: 100px;
border: 10px solid green;
}

.right {
margin-left: 220px;/*左边的margin*/
height: 100px;
border: 10px solid gold;
word-break: break-all; /*强制让内容换行*/
}

第四种：（弹性盒子）

.container{
display: flex;/*容器内的内容自动横向排列*/
}
.left {
width: 200px;
height: 100px;
border: 10px solid green;
}

.right {
flex: 1;/*剩余的部分默认填满*/
height: 100px;
border: 10px solid gold;
word-break: break-all; /*强制让内容换行*/
}

第五种：（网格布局）

.container{
display: grid;
grid-template-columns: 200px auto;
/* grid-template-columns: 200px 1fr; 这个也可以*/
grid-template-rows:100px;
}
.left {
border: 10px solid green;
}

.right {
border: 10px solid gold;
word-break: break-all;
overflow: hidden;
}