固定宽度的居中元素，两侧自动扩展的元素。

Question

我正在尝试使用CSS3来复制下面的HTML表格结构。我已经尝试了浮动元素、创建新的渲染上下文、自动边距、内联块等各种方法。

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 16px;">
    <tr>
        <td>B1, auto-expands</td>
        <td width="175">A, fixed width</td>
        <td>B2, auto-expands</td>
    </tr>
</table>

最终结果应该是一个居中的中间元素，具有固定的绝对宽度和两个侧面元素，这些元素应该扩展以占用其余可用宽度，而不重叠中间元素。

我已经决定使用CSS的"display:table|table-row|table-cell"来实现此目标，但我想知道这里是否有更好的方法来达到相同的效果。

- moeffju

---

我在http://jsfiddle.net/y8CkV/1/上有一个小测试。 - moeffju

CSS的“table”显示属性系列可能是您最好的选择。唯一真正更好的选项是CSS Flexbox模块，但它的浏览器支持还不够好，在大多数情况下并不是非常可行。 - Blake Mann

我已经从事前端开发多年了，但我仍然觉得“CSS设计师，你们在想什么？！”这句话说了很多次。 - moeffju

Answer 1

使用flexbox如何？

HTML：

  <ul>
    <li>left, auto-expands</li>
    <li class="fix">A, fixed width</li>
    <li>right, auto-expands</li>
  </ul>

CSS：

ul {
  display: -webkit-box;
  display:    -moz-box;
  display:         box;
  padding: 0;
}

li {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
          box-flex: 1;
  list-style: none;
  border: 1px solid red;
 }

.fix {
  text-align: center;
  width: 175px;
  -webkit-box-flex: 0;
     -moz-box-flex: 0;
          box-flex: 0;
}

演示：http://jsbin.com/katuroxi/6 带代码的演示：http://jsbin.com/katuroxi/6/edit 浏览器支持：http://caniuse.com/#feat=flexbox

- Burntime

---

Flexbox很好用，我曾经犹豫过因为浏览器支持有些不稳定，但大多数情况下只需要加前缀，所以这是可以接受的。 - moeffju

Answer 2

我的建议

演示：http://cdpn.io/cCaeg

HTML

<div class="wrapper">
  <div class="links">Left</div>
  <div class="mitte">Center</div>
  <div class="rechts">Right</div>
</div>

CSS

.links,
.mitte,
.rechts {
  position: absolute;
  top: 0;
  text-align: center;
  background-color: #888;
}

.links {
  left: 0;
  right: 50%;
  margin-right: 100px;
}

.rechts {
  left: 50%;
  right: 0;
  margin-left: 100px;
}

.mitte {
  left: 50%;
  width: 200px;
  margin-left: -100px;
  background-color: #ccc;
}

- larswittenberg

---

如果我可以接受多个答案，我也会接受这个。我更喜欢 flexbox，因为它感觉不那么 hacky，但这也满足了“要求” :) - moeffju

Answer 3

这种方法也可行，只需根据需要调整百分比以填满100%。这就是bootstrap的做法。

http://jsfiddle.net/mb2V7/

<div class="outer">
    <div class="b col" id="b1">auto-expand</div>
    <div class="a col" id="a">fixed width</div>
    <div class="b col" id="b2">auto-expand</div>
</div>

.outer { width: 100%; 
    position: absolute;
left: 0px;
width: 100%;
margin: 0 auto; 

}
*:before, *:after {
    -moz-box-sizing: border-box;
}
.a {
    outline: 1px solid green;
    background: #efe;
}
.b {
    outline: 1px solid red;
    background: #fee;

     width: 15%;
}
#a {    
 width: 70%;
    text-align: center;
}

.col{ float:left;}

请注意，为了使框能下拉，请使用以下代码：

@media (min-width: 768px) { .col{ width:90%;
}}

- WickStargazer

---

抱歉，我特别询问了固定绝对宽度。百分比宽度很容易，但不足够 :) - moeffju

可能被误解了，看到有一个赞，猜想那就是答案了 :) 如果不是，我会提供一个答案。 - WickStargazer

Answer 4

在这里使用百分比和浮点数将所有内容向左对齐：

这是我的 Fiddle 链接

http://jsfiddle.net/y8CkV/2/

.outer{
width:100%;
}
#a { 
width: 32%;
float:left;
max-width:180px;
min-width:170px;  }
#b1 {
float: left;
width:32%;}
#b2 {
float: left;
 width:31%;
}

这应该涵盖大多数情况，只要您的外部 div 容器大小没有发生巨大变化。

另一种方法是使用 inline-block http://jsfiddle.net/KK7ZC/

- nolawi

---

中心元素的宽度不是固定的（虽然可以通过设置min-width = max-width来模拟），元素的宽度不会加起来等于100％，参见http://jsfiddle.net/y8CkV/3/，其中元素要么不是100％，要么换行。我不确定另一个小提琴图要展示什么-元素不是相邻的吗？ - moeffju

有很多不同的解决方案，我只是给你展示了一个起点的例子。 - nolawi

正确，但这并不是问题的解决方案。问题明确指出中间元素必须具有固定和绝对的宽度，而其他元素需要扩展以填充可用空间。 - moeffju