css - 试图找出一个流畅的 CSS 布局

Question

我正在尝试创建一个具有流畅布局的网站，但我在这样做时遇到了一些问题。我想创建一个包含 2 列的页面，如下所示:

http://migo.no/random/css_layout.jpg

基本上我希望左列的最小宽度为 700 像素，并尽可能地拉伸(stretch)，而右列的宽度固定为 400 像素。此外，如果窗口大小小于 1100 像素，我希望滚动弹出。

我似乎无法如愿以偿..

问候，亚历山大

Answer 1

这是一种方法。不过，这会导致宽度成比例。如果您希望侧边栏始终为 400px 并且只有主列展开，我认为您可以通过使用 min-width 来实现。

<div class="container">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

.container {
  width:100%;
  min-width:1100px;
overflow:auto;
 }

.main {
  width:63.63636363%;
  min-width:700px;
float:left;
}

.sidebar {
  width:36.36363636%;
  min-width: 400px;
float:left;
}