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

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”将确保容器高度伸展以匹配最长的浮动柱。 用于做“人造柱”设计。

我可以使用哪种'clearfix'方法？

其次，需要知道你想要做多少列？ 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%
}

约瑟夫西尔伯是正确的，你不需要浮动右列，但不这样做可能导致其他意外的问题，如框模型的行为和包裹浮动的左项目，特别是如果一个比另一个短。

您可以应用一个边距来将一列偏移到另一列宽度，但我发现这只是一团糟而且浏览器中的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 个解决方案

解决方案1
10 已采纳 2012-01-10 15:38:43

解决方案2
3 2012-01-10 14:53:42

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

问题描述

2 个解决方案

解决方案1 10 已采纳 2012-01-10 15:38:43

解决方案2 3 2012-01-10 14:53:42

解决方案1
10 已采纳 2012-01-10 15:38:43

解决方案2
3 2012-01-10 14:53:42