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，但我想知道这里有人有更好的方法来实现相同的结果。

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

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

Answer 3

这种方式也有效，只需相应调整百分比即可填写100％。 boostrap就是这样做的。

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

Answer 4

这里使用百分比并将所有内容浮动到左侧：

这是我小提琴的链接

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的容器没有改变大小差异的大小。

另一种方法是使用内联块 http://jsfiddle.net/KK7ZC/

固定宽度的中心元件，两侧带有自动扩展元件

4 个答案: