CSS并排布局

Question

当我缩小浏览器宽度超过某个点时，spec div会降低到主div之下。我想防止这种情况发生。我想也许我可以创建一个包含#main和#spec的div并为它设置一个min-width，但这似乎不起作用。

#main {
clear: both;
width: 400px;
min-width: 400px;
float:left;
padding: 10px; 
}

#spec{
padding: 4px;
float: left;
width: 270px;
}

Answer 1

我愿意打赌你正在遇到CSS Box-Model的问题。

简而言之，由于某种原因，盒子模型不包括边框或填充，大多数人都认为它会（实际上它过去常常使情况进一步混乱）

我建议在CSS中添加以下规则：

*{
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}

这将导致您的网页使用框模型的边框样式，这意味着除了边距之外的所有内容都将计入元素的宽度。

Answer 2

我使用min-width测试了它，它确实有效。由于元素是浮动的，因此需要在容器内清除它们才能使其工作。

请参阅此处的示例http://jsfiddle.net/3TDNf/

干杯

Answer 3

你说：

  

我可以创建一个包含#main和#spec的div并设置一个min-width   为它

然而，您发布的css显示您已将min-width: 400px;放在#main div上。也许您需要移动min-width:400px;，以便它适用于同时包含#main和#spec的div。