4

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

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

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

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

尝试仅使用 css 做到这一点，所以如果可能的话，没有第三方任何东西，我知道完美的三列布局和 bootsrap 之类的东西，但我觉得必须有一个纯 css 解决方案来解决这个问题？！

4

2 回答 2

4

我建议你使用 cssdisplay: 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}

这确实允许你有宽度%

于 2013-08-20T18:28:43.243 回答
2

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

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

于 2013-08-20T18:18:40.863 回答