有没有更好的方法来实现这个看似简单的三栏布局？

Question

<div class="row">
    <div class="column fixed"></div>
    <div class="column flexible"></div>
    <div class="column fixed"></div>
</div>

其中.column.fixed是固定宽度和column.flex是它们之间的全宽。

我知道的唯一方法是使用定位，但我想知道是否可以使用display: table-cell来完成。

Codepen：http://codepen.io/bernk/pen/leCxm

Answer 1

如您所知，您可以使用display:table

选项1：display：table

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>fit content</div>
    <div class='cell'>expand content</div>
    <div class='cell'>fit content</div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    width:1%;
    border:1px solid black;
    height:10px;
}
.cell:nth-child(2) {
    width:100%;
}

---

选项2：浮动

....或者，你可以使用花车

Demo Fiddle

HTML

<div></div>
<div></div>
<div></div>

CSS

div {

    border:1px solid black;

    height:10px;

}

div:nth-child(1) {

    float:left;

    width:40px;

}

div:nth-child(2) {

    float:right;

    width:40px;

}

div:nth-child(3) {

    overflow:hidden;

}

Answer 2

清洁和敏感。纯CSS。没有弄乱显示属性。

<div id="layout">
       <div class='left'></div>
       <div class='right'></div>
       <div class='center'></div>
    </div>

    <style>
    .left {
    width: 20%;
    float:left;
    background: red;
    }
    .right {
    width: 20%;
    float:right;
    background:blue;
    }
    .center {
    margin:0 auto;
    width: 60%;
    background:green;
    }
    </style>

小提琴：http://jsfiddle.net/N75Rn/

Answer 3

我喜欢在固定宽度元素上使用position: absolute进行此类布局，并在父级上使用padding值等于width。

它在RWD / SEO中具有优势，因为列的顺序无关紧要。此外，当柔性元件高于它们时，柔性元件的内容物不会泄漏到固定宽度元件下方，根据您的设计，这可能是也可能不是。

这样做的缺点是固定宽度的元素被从内容流中取出，这意味着如果它们高于柔性元素并且如果它破坏了布局，则可能必须以某种方式补偿它们的高度。

示例：

HTML：

<div class="row">
  <div class="column fixed fixed-left"></div>
  <div class="column flexible"></div>
  <div class="column fixed fixed-right"></div>
</div>

CSS：

.row { padding: 0 150px; }

.fixed {
  position: absolute;
  top: 0;
  width: 150px;
}

.fixed-left  { left: 0; }
.fixed-right { right: 0; }

---

这是a pen with this。