水平对齐两个块：一个的宽度应由其内容确定，另一个应占据所有剩余的宽度

Question

我在容器中有两个块元素：

  <div class="container">

      <div class="element element_a">Element_A</div>
      <div class="element element_b">Element_B</div>

  </div>

容器占用所有可用宽度。宽度未知/动态。

元素B的宽度应该由它的内容决定（就像float或display: table一样）。内容的宽度未知/动态。

元素A应占据容器的所有剩余宽度。

以下是所需结果的屏幕截图：

以下是实验的样板：http://jsbin.com/xalazi/3/edit?html,css,output

应该有不止一种方法，我建议每个答案发布一种方法。

PS No JS！

Answer 1

float和overflow: hidden

利用overflow: hidden（或overflow: auto）填充剩余的水平空间。

（ NB ：为此，右侧浮动元素B必须首先出现在您的标记中）

标记

<div class="wpr">
    <div class="b">element B</div>
    <div class="a">element A</div>
</div>

CSS

.wpr {
    height:80px;
}
.b {
    background: aqua;
    float:right;
}
.a {
    background: maroon;
    overflow: hidden;
}

演示

FIDDLE

赞成

• 非常简单
• 100％浏览器支持

缺点

• 元素A的内容不能出现在元素之外（例如，具有绝对定位）

Answer 2

模仿表

HTML

  <div class="container">

    <div class="element element_a">Element_A</div>
    <div class="element element_b">Element_B</div>

  </div>

CSS

*, *:before, *:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.container {
  border: 1px solid black;
  display: table;
  width: 100%;
}

.element {
  display: table-cell;
  height: 200px;
}

.element_a {
  background-color: deeppink;
  width: 100%;
}

.element_b {
  background-color: deepskyblue;
}

演示

http://jsbin.com/xalazi/4/edit?html,css,output

赞成

• 相对简单
• 不需要额外加价
• 100％浏览器支持

缺点

• 高度变得相同（等于具有更高内容的元素的高度）

Answer 3

<强> Flexbox的

使用flexbox很容易实现非常。

.container {
  display:flex;
}

.element_a {
  flex-grow: 1;
  flex-shrink: 0;
  /* optional shorthand = flex: 1 0 auto; */
}

.element_b {
  /* no special css needed */
}

注意：您可能需要根据要定位的浏览器添加供应商前缀。

将容器设置为flex，元素会自动调整为内容。

设置.element_a＆＃39; flex-grow为1将确保它填满剩余空间。 Flex-shrink将确保.element_b的内容不会重叠。

演示：http://jsbin.com/yidekaqutozo/3/edit