javascript - 这种布局能否用纯css实现

Question

如图，左边的头像部分是固定的，但是右边的宽度是随着父元素的宽度而变化的，虽然可以通过js计算后来控制它的宽，我想问可不可以用纯css来实现？

Answer 1

<p class="a1" style="position: relative;">
    <p class="a2" style="
        width: 100px;
        height: 100px;
        position: absolute;
        left: 0;
        top: 0;
        background: red;"></p>
    <p class="a3" style="
        margin-left: 120px;
        background: blue;
        height: 100px;"></p>
</p>

Answer 2

Demo：https://jsfiddle.net/23d8e966/

<p class="comment">
  <p class="avatar"></p>
  <p class="comment-content"></p>
</p>

.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;
}

Answer 3

<p>
    <p class="left"></p>
    <p class="right"></p>
</p>

<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都可以。
相关拓展关键词：双飞翼布局、圣杯布局

Answer 4

可以用css3的flex

Answer 5

.left {float:left; width:100px; height: 300px; background:#333}
.main{ overflow: hidden; height: 300px; background:#f22}

<p class="left"></p>
<p class="main"></p>

关键字：BFC