动态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> 

的问题是，“A”的宽度是动态的，它改变，这意味着“B”的宽度也发生变化（虽然“B”将具有27px的最小宽度）。

我可以测量“A”的宽度并使用jQuery更改css，但我想知道是否有办法简单地使用CSS处理“A”和“B”的宽度变量。

Answer 1

我已经没有任何弹性的解决方案。只有简单的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。为了清晰起见，我在容器中添加了边框。

Answer 2

这里是我是如何做到使用Flexbox的

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

<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>