左列尽可能宽

Question

我正在尝试用简单的两列布局编写一个网页，左列是目录等，右列是实际内容。到目前为止，我所见过的所有例子都硬连线左列宽度（以像素为单位），这显然不太理想。 CSS中推荐的方法是“使左列尽可能宽，右列占用其余可用空间”？

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

您只需将导航设置为向左浮动即可。大小调整将自动发生。

HTML：

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

CSS：

div.nav {
    float:left;
}

Answer 5

将此设为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;

每个左右课程。