简单的3列响应式布局

Question

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

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

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

小提琴看起来像垃圾，但基本上左/右列的大小应该缩小到最小宽度然后开始缩小中间向下并且所有容器应该保持彼此之间30px的边距...现在当它达到最小宽度时/中间容器移动到第一个容器，因为浏览器窗口调整大小，我需要保持盒子，只是继续变小...好像双方都要在中间容器上漱口

尝试用css做这个，所以如果可能没有第三方任何东西，我知道完美的三列布局和靴子的东西，但我觉得必须有一个纯粹的CSS解决方案吗？！

Answer 1

我建议你使用css display: table和display: table-cell它们被广泛使用。 这是你工作的简化小提琴： 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}

这允许你有宽度 %

Answer 2

CSS中存在一些语法问题，例如display:float:left; 不会做任何事情。 此外，您不能以百分比定义固定的边距和宽度，因为您不知道屏幕上是否留有那么多空间。

这是你想要的结果 - http://jsfiddle.net/x7Atq/7/