CSS并排布局

当我将浏览器宽度缩小超过某个点时，spec div降至主div以下。我想防止这种情况发生。我想也许我可以制作一个div来保存#main和#spec，并为它设置最小宽度，但这似乎不起作用。CSS并排布局

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

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

2012-02-16 chief

我很确定你的建议会实际工作。你是容器div div的宽度必须至少为698px。如果你有一个静态宽度，你也不需要在主要的最小宽度。 – 2012-02-16 03:17:58

最小宽度应该这样做......您定位了哪个浏览器？ – 2012-02-16 03:18:20

我正在使用Firefox 10，但希望它可以跨浏览器兼容。 – chief 2012-02-16 03:42:16

我使用最小宽度测试了它，它绝对有效。因为这些元素是浮动的，所以他们需要在容器内清除它以便工作。

看到这里的例子中，http://jsfiddle.net/3TDNf/

干杯

2012-02-16 03:41:56

我敢打赌，你正在运行一个问题CSS Box-Model。

总而言之，盒模型由于某种原因，不包括边界或填充，而大多数人期望它会（事实上它曾经，进一步混乱的情况）

我建议增加下面的规则你的CSS：

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

这将导致你的网页使用盒模型，这意味着除了保证金一切的边界框样式将在元素的宽度计算。

2012-02-16 03:21:24

我假设我在CSS页面的顶部插入了这个，并在所有其他代码之后插入了大括号。当我这样做时，即使浏览器窗口完全打开，它也会将#main div下面的#spec div拉出来。 – chief 2012-02-16 03:43:47

不，*是通配符选择器，将内部样式添加到所有元素。 – 2012-02-16 04:12:14

你说：

我能有这样同时拥有#main和#spec一个div并设定一个最小宽度它

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

2012-02-16 03:51:58 jeremysawesome

回答