Question

我需要一些帮助来构建灵活的html布局。我已经定义了页面wrap的最小和最大宽度。在wrap内，我有两列，content和right。

我想要固定宽度right列。但是，我想使content宽度灵活，以便根据最小宽度和最大宽度，宽度应该增加或减少。

这是我的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?

}

Answer 1

在CSS中创建浮动列时，需要学习一些内容。

首先，还应清除容器（在您的情况下为 .wrap ）以用于浮动。这是关于“clearfix”的一个很好的Stackoverflow问题。 “Clearfix-ing”将确保容器高度伸展以匹配最长的浮动柱。用于做“人造柱”设计。

What methods of ‘clearfix’ can I use?

第二，是否需要知道您要查看多少列？ 2列？ 3列？

皮肤有不同的方法。您可以执行2列，然后通过另外2列布局将其中一列再细分。或者您可以放置3个块容器并将每个容器浮动到总宽度的百分比。 IE浏览器。对于3列布局，您理论上希望每个布局宽度为33.33％（取决于您想要如何做到装订线或边距）。

第三次，您谈到“灵活布局”。好吧，灵活的布局不能用于像素宽度，因为像素是静态值。 IE浏览器。如果你说宽度是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%
}

现在为您提供了一个很好的安全区域，您将避免舍入错误。

此外，现在我们正在使用％，布局将是流畅的。您的2列将使用浏览器重新调整大小，直到达到最小/最大像素值。

另外，别忘了“clearfix”

<div class="wrap clearfix">

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

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

</div>

当然，在处理流体/柔性网格时需要考虑很多其他因素。

你可以做的一件事就是不重新创建方向盘，而是使用像Yahoo!这样的CSS框架。或蓝图。我相信他们有这些内置的，并且经过了强有力的测试。

另外，我建议阅读响应式网页设计。有一篇关于它的A List Apart文章：http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte撰写的一本书（该文章的另一篇并由ALA网站出版），这是一本很棒的读物。

这本书的唯一真正缺点是它没有涵盖响应式设计的缺点，以及尽管有“酷”因素，许多大牌网页设计师/开发人员仍然选择使用单独的移动/桌面网站设计。

由于最初的问题只涉及流畅的设计而不是媒体目标规模，因此这是一个轻微的偏离主题。

希望有所帮助！

干杯！

Answer 2

<强> 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 */
}

CSS min-width和max-width以及灵活的布局

2 个答案: