CSS最小宽度和最大宽度以及灵活布局

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

我想要固定宽度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? 

}

来源

2012-01-10 user1117313

在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/1000像素= 0.618 * 100（为百分比）= 61.8％

382px/1000像素= 0.382 * 100（为百分比）= 38.2％

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

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

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

您可以应用边距来将一列抵消到另一列的宽度，但我发现只是很混乱，并且在浏览器中仍然存在CSS实现不佳的问题（就像我说我不支持IE6现在，它仍然被我们的访问者用来支持它）。

另请注意，在处理％时，会遇到舍入错误。某些浏览器在达到“.5％”时会下降或上升。这可能会导致您的浮动列进行换行，因为它比容器元素大1px。所以，为了安全起见，您可能需要削减一点宽度，以便为您提供1-2像素的包装缓冲区。

一个常见的方法是在10px的左列和右列之间给出一个“空”的排水沟或边界。而10px的在我们的设计是：

10px的/ 1000像素= 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>

有，当然，有很多其他因素的流体/灵活的电网打交道时，要考虑到。

你可以做的一件事情不是重新创建轮子，而是使用像雅虎这样的CSS框架。或蓝图。我相信他们有这些内置的并且经过了严格的测试。

此外，我建议阅读响应式网页设计。这里有一个A List Apart文章：http://www.alistapart.com/articles/responsive-web-design/以及由Ethan Marcotte（另一篇文章和ALA网站发布）写的一本书，这本书很棒。

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

这是一个轻微的话题，因为最初的问题只是谈论流体设计而不是媒体目标大小。

希望有帮助！

干杯！

来源

2012-01-10 15:38:43 jmbertucci

他想要一个固定宽度的列，你的答案不允许这样做。 – Michael 2015-01-07 01:05:35

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

来源

2012-01-10 14:53:42

如果我把内容放在HTML的正确div之前，为什么它不能正常工作？我应该如何做这项工作？谢谢 – user1117313 2012-01-11 08:54:51

@ user1117313 - 不幸的是，这是不依赖于JavaScript的唯一方法。 – 2012-01-11 15:31:22

CSS最小宽度和最大宽度以及灵活布局

回答

相关问题