左列尽可能宽，它需要是

我想写一个简单的两列布局的网页，左列是内容表等内容，右列是实际内容。到目前为止，我所看到的所有例子都以左上角的像素为单位，这显然并不理想。在CSS中推荐的方法是“使左列尽可能宽，右列占用剩余的可用空间”？左列尽可能宽，它需要是

2012-05-01 rwallace

只是不指定固定width。如果要控制最小或最大宽度，则分别使用min-width和max-width。

2012-05-01 13:34:55

您可以使用百分比指定左列的宽度，右列也是如此。例如：

left_column { width: 30% } 
right_column: { width: 70%}

2012-05-01 13:37:04 Lodder

如果左栏的内容超过父母的30％？ OP希望有一个灵活的左列，因此如果内容仅占15％，则该列仅占15％。不是流动布局，你仍然有一个“固定”的宽度（尽管相对于浏览器窗口） –

您只需将导航设置为向左浮动。尺寸会自动发生。

的HTML：

<div class="nav">Navigation</div> 
<div class="content">Body Text</div>

的CSS：

div.nav { 
    float:left; 
}

2012-05-01 13:38:28 jncraton

只是确保你清除浮动，所有的浮动后，否则你的布局将遭受更多的问题。 –

但是，一旦超出导航文本底部，正文文本就会回到屏幕的整个宽度。您如何使正文文本保持原始宽度，就好像导航栏无限长？ – rwallace

我不知道如何做到这一点，没有指定某种类型的宽度，因为其他答案已经完成。 – jncraton

.left_col{min-width: 10px;} 
.right_col{max-width: 20px;}

2012-05-01 13:38:36 Chandrakant

尽管如此，这仍然是以像素为单位的硬连线，这是创建一些在我的机器上看起来不错的好方法，并且在别人的机器上看起来很糟糕，其中字体或屏幕分辨率或其他我没有想到的东西是不同的。 – rwallace

是的，我只是举例而已，我们可以使用％而不是PX – Chandrakant

使此HTML

<div class="left">Left Div</div> 
<div class="right">Right Div</div>

而且你的CSS

.left {float:left; width:auto;} 
.right {float:right; width:auto;}

您可以添加边距和/或填充以在两者之间留出一点空隙。

这应该是流体布局所需的一切。

编辑：如果一个出现下面的其他添加

display:inline-block;

到每个左侧和右侧类。

2012-05-01 16:24:49

即使我添加内嵌块，右边的分区出现在左边的分区下方。 – rwallace

似乎这两列的宽度以及它们的填充和边距都会将hp添加到页面宽度的100％以上。你有你的代码显示吗？ –

回答