简单的三栏响应式布局

Question

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

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

这里是jsfiddle链接-http://jsfiddle.net/x7Atq/ 虽然这个样式很糟糕，但基本上左/右列应该缩小到最小宽度，然后开始缩小中间部分。所有容器之间应该保留30像素的边距。当前，当浏览器窗口调整大小时，第二/中间容器会移动到第一个容器上方，我需要盒子保持不动，只需继续缩小...就好像两侧要压缩到中间容器一样。如果可能的话，尝试仅使用CSS实现此目标，而不是使用第三方任何工具。我知道有类似完美三列布局和bootstrap等工具，但我觉得肯定有纯CSS的解决方案！

- mike

Answer 1

我建议你使用广泛未被使用的CSS display: table 和 display: table-cell。以下是一个简化版的工作jsfiddle链接：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}

这确实允许您在%中拥有宽度

- vinyll

---

我在 .one 和 .three 上设置了 min-width，它起作用了！两列都会缩小到 min-width，而中间的容器则分别填满其余的空间！我知道这只是简单的 CSS。谢谢！http://jsfiddle.net/u5nR2/2/ - mike

如何使用table和table-cell来保持恒定的边距？ - prtksxna

我不知道@prtksxna你是否在谈论这个问题，但当我开始在这种用CSS表格结构化的div周围放置大量内容时，使用margin或padding几乎不可能移动物体...我想知道你是否指的是这个问题，因为CSS表格使得内部对象几乎无法移动，除非使用top/left，但我听说这样做并不好，因为使用相对定位会影响文档流。任何信息都将不胜感激，谢谢！ - mike

Answer 2

你的CSS存在一些语法问题，例如display:float:left;不会产生任何效果。此外，如果你将固定的边距和百分比宽度定义在一起，你将不知道屏幕上是否有足够的空间。

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

- prtksxna

---

抱歉那个糟糕的代码...我想要的是最左边和最右边列从10%变小到min-width，因为它们都是重要信息的导航，所以我不希望它们变得太小...所以我认为左侧需要float left，最后一个容器应该float right，这样它们总是在屏幕的左侧和右侧...然后中间就填满了中间的部分...现在如果你在最后一个容器上放置float，中间的空间就不会填满了右侧的空间http://jsfiddle.net/x7Atq/12/ - mike

我正在尝试更好地澄清...基本上左右两列应该始终停留在屏幕上，而中间容器只是它们之间剩余的空间...然后我可以在整个站点容器上放置一个最小宽度，以便中间的信息不会太小，但这就是我需要的布局，希望这样更加清晰明了。 - mike