css左边容器固定宽度,右边自适应的几种效果
内容代码如下:<div class="container"> <div class="left"></div> <div class="right"></div></div&
内容代码如下:
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
第一种:
.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;
}
更多推荐
所有评论(0)