CSS的最小宽度、最大宽度和弹性布局

Question

CSS的最小宽度、最大宽度和弹性布局

5

我需要帮助构建一个灵活的HTML布局。我已经定义了页面包裹（wrap）的最小和最大宽度。在包裹中，我有两列，内容（content）和右侧（right）。

我想要一个固定宽度的右侧列。但是，我希望使内容宽度具有灵活性，以便根据最小和最大宽度增加或减少其宽度。

以下是我的HTML结构：

<body>
    <div class="wrap">
        <div class="content">...</div>
        <div class="right">...</div>
    </div>
</body>

这是CSS，我正在尝试：

.wrap{
    min-width: 780px;
    max-width: 1140px;
    margin: 10px auto;
}

.right{
    float:left
    width: 200px;   
}

.content{
    float: left;
    width: ?? //what should i do here?

}

- user1117313

2个回答

3

HTML:

<body>
    <div class="wrap">
        <div class="right">...</div>
        <div class="content">...</div>
    </div>
</body>

CSS：

.right {
    float: right;
    width: 200px;   
}

.content {
    padding-right: 200px; /* or margin */
    /* No need to float this */
}

- Joseph Silber

为什么我在HTML中在右侧div之前放置内容，它就无法工作？我该如何使其正常工作？谢谢。 - user1117313

1

@user1117313 - 不幸的是，这是唯一的方法，而不依赖于JavaScript。 - Joseph Silber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jmbertucci · Accepted Answer

在CSS中制作浮动列时，有一些需要学习的内容。

首先，容器（在您的情况下是.wrap）也应该清除浮动。这里有一个关于“clearfix”的很好的Stackoverflow问题。“清除浮动”将确保容器高度会拉伸到与最长的浮动列相匹配。用于实现“假列”设计。

我可以使用哪些“clearfix”方法？

其次，需要知道您要做多少列？2列？3列？

有不同的方法来完成此任务。您可以进行2列，然后通过另一个2列布局将其中一个列进行细分。或者您可以放置3个块容器，并将它们各自漂浮到总宽度的百分比。即：对于3列布局，理论上希望每个列都占33.33％的宽度（根据您想要如何处理间距或边距）。

第三，您谈论“灵活布局”。嗯，像素宽度不能用于灵活布局，因为像素是静态值。也就是说，如果您说宽度为200px，则无论容器或窗口的大小如何，宽度始终为200px。

您需要使用百分比。当然，要进行正确的灵活布局，您需要有一个基础尺寸。因此，您确实需要具有固定宽度设计，您将说这是您的“最佳设计”（我必须宽松地使用该术语，因为真正的灵活和响应式设计应该在大多数情况下看起来不错）。

因此，假设您的设计已设置为使主内容区.wrap为1000px。您想要一个使用黄金比例的2列布局。http://en.wikipedia.org/wiki/Golden_ratio

基本上，您需要其中一列是618px，另一列是1000px - 618px = 382px。

对于CSS，您需要根据百分比设置它们。要获取百分比，请取父元素宽度并将其除以所需宽度。

618px / 1000px = .618 * 100（百分比）= 61.8％

382px / 1000px = .382 * 100（百分比）= 38.2％

.left {
    float: left;
    width: 61.8%
}

.right {
    float: right;
    width: 38.2%
}

Joseph Silber说得对，不需要将右列浮动，但不这样做可能会导致盒模型的其他意外问题，并且围绕浮动的左侧项目包裹，特别是如果一个比另一个短。

您可以应用边距来抵消一列到另一列的宽度，但我发现这只会让事情更麻烦，并且在浏览器中可能仍然存在CSS实现方面的问题（尽管我不再支持IE6，但我们的访问者仍然足够需要支持它）。

还要注意的是，在处理％时，会遇到舍入误差。有些浏览器在达到“.5％”时会向下或向上取整。这可能会导致您的浮动列换行，因为它比容器元素大1px。因此，为了安全起见，您可能希望削减一点宽度，以获得1-2px的缓冲区。

常见的方法是在左列和右列之间给出“空白”间距或边距，例如10px。我们设计中的10px如下：

10px / 1000px = 0.01 * 100（换算成百分比）= 1％

现在，您可以从每列中减去0.5％，或从一列中完全减去1％。我将选择后者。

.left {
    float: left;
    width: 60.8% /* removed 1% to give a gutter between columns */
}

.right {
    float: right;
    width: 38.2%
}

现在使用这种方法可以为你提供一个良好的安全区域，避免了舍入误差。

此外，现在我们正在使用百分比，页面布局会更加自适应。你的两列将会随着浏览器的改变而调整大小，直到达到最小/最大像素值。

另外，别忘了“clearfix”。

<div class="wrap clearfix">

    <div class="left">
        <!-- content -->
    </div>

    <div class="right">
        <!-- content -->
    </div>

</div>

当然，在处理流式/灵活网格时需要考虑很多其他因素。

你可以做的一件事是不要重新发明轮子，而是使用像Yahoo!或Blueprint这样的CSS框架。我相信它们已经内置了这些功能并经过了充分的测试。

此外，我建议阅读响应式Web设计方面的资料。有一篇A List Apart的文章：http://www.alistapart.com/articles/responsive-web-design/，以及由Ethan Marcotte撰写的一本书（该文章的作者），这是一篇非常好的读物。

唯一真正的缺点是该书没有涵盖响应式设计的缺点，尽管具有“酷”的因素，但许多著名的网络设计师/开发人员仍选择使用单独的移动/桌面网站设计。

这有点偏离话题，因为原始问题只涉及流体设计而不涉及媒体目标大小。

希望能帮到你！

干杯！