如图,左边的头像部分是固定的,但是右边的宽度是随着父元素的宽度而变化的,虽然可以通过js计算后来控制它的宽,我想问可不可以用纯css来实现?
Demo:https://jsfiddle.net/23d8e966/
<div class="comment">
<div class="avatar"></div>
<div class="comment-content"></div>
</div>
.comment {
position: relative;
}
.comment .avatar {
left: 10px;
top: 0;
width: 40px;
height: 40px;
position: absolute;
background: #999;
}
.comment-content {
height: 100px;
border: 1px solid #eee;
background: #fff;
margin-left: 60px;
}
<div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.left{
float: left;
width: 200px;
height: 50px;
background-color: rgba(0,0,255,0.5);
}
.right{
margin-left: 210px;
height: 50px;
background-color: rgba(255, 0, 0, 0.5);
}
</style>
两列自适应布局比较简单,让定宽一列脱离文档流就好了,使用absolute
、float
都可以。
相关拓展关键词:双飞翼布局、圣杯布局
.left {float:left; width:100px; height: 300px; background:#333}
.main{ overflow: hidden; height: 300px; background:#f22}
<div class="left"></div>
<div class="main"></div>
关键字:BFC
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读