簡單的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/