html - 简单的 3 列响应式布局

Question

我有一个简单的三列布局，但似乎无法正常工作。这对你们大多数人来说可能非常容易，但出于某种原因我无法让它工作。

<div>min-width</div><div>stay in center</div><div>min-width</div>

这是 jsfiddle - http://jsfiddle.net/x7Atq/

fiddle 看起来很糟糕，但基本上左/右列的尺寸应该缩小到最小宽度，然后开始缩小中间，所有容器之间应该保持 30px 的边距......现在当它达到最小宽度时随着浏览器窗口大小的调整，第二个/中间容器在第一个容器上移动的宽度，我需要盒子保持不动，只是不断变小......就好像两侧要挤进中间容器

尝试只用 css 来做到这一点，所以如果可能的话不要第三方，我知道完美的三列布局和 bootsrap 之类的东西，但我觉得必须有一个纯 css 解决方案吗？!

Answer 1

我建议您使用 css display: table 和 display: table-cell ，它们未被广泛使用。这是你在使用简化的 fiddle :http://jsfiddle.net/u5nR2/1/

HTML:

<div class="container">
    <div class="one">
        <div>one</div>
    </div>
    <div class="two">
        <div>two</div>
    </div>
    <div class="three">
        <div>three</div>
    </div>
</div>

CSS

html, body{height:100%;}

.container{
    width:100%;
    height:100%;
    display: table;
}
div > div {
  display: table-cell;
}
.one {width:15%; background:#ccc}
.two {width: 60%; background:#cba}
.three {width: 25%; background:#ca8}

这确实允许您在 %

中拥有宽度