我需要一些帮助来构建灵活的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?
}
最佳答案
在CSS中创建 float 列时，需要学习一些知识。
首先，也应清除容器(在您的情况下为.wrap)以进行浮点运算。这是有关“clearfix”的一个很好的Stackoverflow问题。 “Clearfixing”将确保容器的高度将拉伸(stretch)以匹配最长的 float 柱。对于执行“人造柱”设计很有用。
What methods of ‘clearfix’ can I use?
第二个，是否需要知道您要查找多少列？ 2列？ 3列？
有多种方法可以给猫咪贴皮。您可以创建2列，然后将其中一列再分割为另一2列布局。或者，您可以放置3个大块容器，然后将每个小容器 float 到总宽度的一定百分比。 IE。对于3列布局，理论上您希望每个宽度为33.33％(取决于您要如何处理装订线或边距)。
第三个，您谈论的是“灵活的布局”。好吧，灵活的布局无法使用像素宽度，因为像素是静态值。 IE。如果您说宽度为200像素，则无论您的容器或窗口的大小如何，宽度始终为200像素。
您需要做的是使用百分比。当然，要进行正确的灵活布局，您需要具有基本尺寸。因此，您确实需要固定一个设计，将其称为“最佳设计”(我必须宽松地使用该术语，因为真正的灵活和响应式设计在大多数情况下应该看起来不错)。
因此，可以说您的设计设置为将主要内容区域.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)是正确的，您不需要 float 右边的列，但是这样做可能会导致其他意外问题，例如盒子模型如何作用并环绕 float 的左边元素，尤其是当一个元素短于另一个元素时。
您可以应用页边距将一列偏移到另一列宽度，但我发现这只是一团糟，浏览器中CSS实现不佳仍可能会出现问题(就我所说的那样，我不再支持IE6了，足以被我们的访问者使用以支持它)。
另请注意，在处理％时会遇到舍入错误。某些浏览器在达到“.5％”时会四舍五入。这可能会导致您的 float 列换行，因为它比容器元素大1px。因此，为了安全起见，您可能需要削掉一点宽度，以便为包装提供1-2px的缓冲区。
一种常见的方法是在左右列之间设置一个10像素的“空”装订线或边距。我们设计中的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框架。或蓝图。我相信它们具有内置功能，并且已经过严格测试。
另外，我建议您阅读响应式Web设计。上面有一篇“A List Apart”文章:http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte撰写的一本书(该文章的另一部分并由ALA网站出版)，是一本好书。
该书唯一真正的缺点是它没有涵盖响应式设计的缺点，尽管有“酷”的因素，但许多知名的网页设计师/开发人员如何选择仍然使用单独的移动/桌面网站设计。
由于最初的问题只是在讨论流畅的设计，而不是媒体目标尺寸，因此这有点偏离主题。
希望对您有所帮助!
干杯!
关于html - CSS最小宽度和最大宽度以及灵活的布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8805208/