动态CSS宽度

Question

所以，我有一个横跨页面的div容器（请参见图片）。

<div class="container">
  <div class="A">Content length changes</div>
  <div class="B">Width dependent on "A"</div>
  <div class="C">fixed 27px width</div>
  <div class="D">fixed 27px width</div>
</div>

问题是＆＃34; A＆＃34;的宽度是动态的，它会改变，这意味着＆＃34; B＆＃34;宽度也会改变（虽然＆＃34; B＆＃34;最小宽度为27px）。

我可以测量＆＃34; A＆＃34;的宽度。并使用jQuery更改css但我想知道是否有办法处理＆＃34; A＆＃34;和＆＃34; B＆＃34;只需使用CSS。

Answer 1

以下是我使用flexbox的方法

＆＃13;

＆＃13;

div {
  border: 3px solid;
}
.child {
  padding: 10px;
  margin: 10px;
  background-color: #eee;
}
.container {
  padding: 10px;
  background-color: yellow;
  display: -webkit-flex;
  display: flex;
}
.child.one {
  -webkit-flex: 5 1 200px;
  flex: 5 1 200px;
  color: green;
}
.child.two {
  -webkit-flex: 1 3 200px;
  flex: 1 3 200px;
  color: purple;
}
.child.three,
.child.four {
  width: 50px;
}

＆＃13;

<div class="container">
  <div class="child one">
    Child One
    <br>Lorem ipsum
    <br>dolor sit amet
    <br>This is a bit longer line
  </div>

  <div class="child two">
    Two
  </div>

  <div class="child three">
    Three
  </div>

  <div class="child four">
    Four
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我有一个没有任何弹性的解决方案。简单的CSS。

.A {
  float:left;
}
.B {
  overflow: hidden;
}
.C, .D {
  float: right;
  width: 27px;
  min-width: 27px;
}

/* beautiful appearance */
.container {
  border: 4px solid #999;
  padding: 8px;
}
.A, .B, .C, .D {
  padding: 4px 8px;
}
.A { background: #ff6; }
.B { background: #69f; }
.C { background: #f60; }
.D { background: #6c6; }

<div class="container">
  <div class="D">D</div>
  <div class="C">C</div>
  <div class="A">A. Content length changes</div>
  <div class="B">B. Dependent on "A"</div>
</div>

http://jsfiddle.net/glebkema/Lf5fw9e6/

UPD。为清晰起见，我已在容器中添加了边框。