Question

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

基本上我希望左列的最小宽度为700px，尽可能伸展，右列的固定宽度为400px。此外，如果窗口大小小于1100px，我希望滚动弹出。

我似乎无法按照我的意愿得到它。

此致亚历山大

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;
}

Answer 2

JSBin中的基本设置--------＆gt; HERE

基本上你只是将副内容浮动到右边周围的#container div确保两列保持最小1100px。

Answer 3

为您的body min-width: 1100px，#left-column一个float: left，width: 100%和margin-left: -400px以及#right-column float: right和width: 400px。不幸的是，要使列超出窗口的高度，除非它比其内容短，否则需要在onload和onresize窗口事件上调整javascript大小。这是一个有一个工作示例的jsfiddle：http://jsfiddle.net/dAgdx/。

（注意：对列高的javascript评估可能需要在不同的浏览器中进行一些调整。您可能会注意到它们的高度比调整大小时的窗口高度略大。

Answer 4

工作示例：http://labs.siku-siku.com/experiment/01

<强> CSS：

#box {
    min-width: 1100px;
}
#left,
#right {
    min-height: 500px;
}
#left {
    margin-right: 400px;
    min-width: 700px;
    background-color: #0f0;
}
#right {
    float: right;
    width: 400px;
    background-color: #f00;
}

<强> HTML：

<div id="box">
    <div id="right">400px fixed width</div>
    <div id="left">min-width of 700px</div>
</div>

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

4 个答案: