左对齐最大边距

Question

我在一个div中有3个元素a，b，c。 a和c的大小是固定的，而b可以更改其大小。如何对齐c，以便b可以改变其大小但不影响c？

的定位

我制作了一个模型，使其更清晰。我正在锁定maximum-margin，或类似的东西。

我还添加了JSFiddle。如果您更改.b的宽度，.c应保留在同一位置。目前情况并非如此。

Answer 1

您可以设置外部容器的宽度，您可以像这样浮动.a，.c： DEMO

HTML：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

的CSS：

.container {
    width:600px;
}
.a {
    float:left;
    width: 100px;
    height: 300px;
    background-color: red;
    display:inline-block;
}
.b {
    width: 10px;
    height: 300px;
    background-color: blue;
    display:inline-block;
}
.c {
    float:right;
    width: 100px;
    height: 300px;
    margin-left: 200px;
    background-color: red;
    display:inline-block;
}
.a,.b,.c{
    margin:0 0 0 5px;
}

更新 Demo - 指定.b宽度和边距

Answer 2

Updated Demo

.a,.c
{
 width: 100px;
 height: 300px;
 background-color: red;
 display:inline-block;
}
.b
{
 height: 300px;
 background-color: blue;
 display:inline-block;
 vertical-align:top;

}

更改宽度并检查。我假设总宽度不超过100％。

Answer 3

您可以float .a，.c和居中.b

#wrapper{text-align:center;}
#wrapper:after{
    display:block;
    content:'';
    clear:both;
}
.a,
.c{
    float:left;
    width:150px;
    text-align:left;
    height:100px;
    background:#000;
}
.c{float:right;}
.b{
    display:inline-block;
    text-align:left;
}

DEMO

Answer 4

HTML：

<div class="d">
<span class="a">aa</span>
<span class="b">bb</span>
<span class="c">cc</span>
</div>

CSS：

.a,.c
{
    width: 100px;
    height: 300px;
    background-color: red;
    display:inline-block;
}
.b
{
    width:100%;
    height: 300px;
    background-color: blue;
    display:inline-block;
}
.d{
white-space:nowrap;
width:350px;
display:inline-block;
}

DEMO