html - 左栏尽可能宽

Question

我正在尝试使用简单的两列布局编写网页，左列是目录等，右列是实际内容。到目前为止，我看到的所有示例都以像素为单位硬连接左列宽度，这显然并不理想。CSS中推荐的方式是说“使左列尽可能宽，右列占用剩余的可用空间”？

score 2 · Accepted Answer

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

score 1 · Accepted Answer

1

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

于 2012-05-01T13:38:36.620 回答

score 0 · Accepted Answer

您只需要将导航设置为向左浮动。大小将自动发生。

的HTML：

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

CSS：

div.nav {
    float:left;
}

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

将此作为您的 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;

到每个左班和右班。

5 回答 5