css - 宽度可变的div

Question

我如何创建 3 个 div，div1 的最大宽度为 1280px，div2 和 div3 具有固定宽度(34px 和 311px)，它们之间有一些空间。 我需要创建这样的效果

---------------------------- ---- ------------
|div1 | |div2| |div3 |
---------------------------- ---- ------------

和 div1 可以在窗口调整大小时改变它的宽度。 父容器为 1650px。

Answer 1

您可以通过反转容器的流向来使用 float 属性。

或者使用 HTML <table> 的显示属性使用。(完全不像说使用表；))

HTML

<div id="tablelike"><!-- make these div behave like table and td elements -->
  <div class="div1">A</div>
  <div class="div2">B</div>
  <div class="div3">C</div>
</div>
<!-- reverse flow to use float properties -->
<div id="floatchild">
  <div class="div3">C</div>
  <div class="div2">B</div>
  <div class="div1">A</div>
</div>

CSS

#tablelike {
  display:table;
  width:100%;
    border-spacing:0.5em;
}
#tablelike, #floatchild {
  max-width:1650px;

}
#tablelike > div {
  display:table-cell;
}
.div1 {
 /* take space left */
    border:solid 1px;
}
.div2 {
  width:34px;
    border:solid 1px;
}
.div3 {
  width:311px;
    border:solid 1px;
}
#floatchild {
  padding-right:0.5em;
}
#floatchild > div {
  margin:0 0 0 0.5em;
  overflow:hidden;
}
#floatchild .div2, #floatchild .div3 {
  float:right;
}

存在行为差异，非 float 元素上的 float 和布局将允许元素彼此分开，只要有空间。

表格属性将使 3 个元素保持在同一行，宽度与高度相同，但可以允许每个元素的增长超过 CSS 中声明的大小。

http://codepen.io/gc-nomade/pen/EmlhB