如何使我的网页固定布局？

Question

这是示例/ jsFiddle：http://jsfiddle.net/antonpug/ub7xW/

基本上，你不能在jsFiddle中看到它，我不认为，但是当它是全屏时它是两列，但是，当你使屏幕变小时，它会折叠到只有一列 - 我无法弄清楚我的CSS在哪里做到了！

Answer 1

这导致它：

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

如果inline-block为1200像素或更高，wrapper将使它们彼此相邻，否则它将不会。如果您不希望它包裹，请设置最小宽度。

#wrapper {
    min-width: 1200px; /*might need a bit more for margins*/
    margin:25px;
}

Answer 2

如果您执行希望列彼此相邻，则必须在body选择器下指定宽度。

像

这样的东西

body {width:1500px;}

这会强制身体溢出屏幕并将列放在彼此旁边。否则，屏幕的宽度（或“查看区域”）会为width选择器设置body，因为它的默认值为width:auto。

Answer 3

将css更改为

#wrapper {
  margin: 25px auto;
  width: 80%;
}

和

.column {
  display: inline-block;
  width: 46%;
  margin: 15px;
  float: left;
}

Answer 4

这很直接：

.column {
    display: inline-block;
    width:600px;
    margin:15px;
}

你有2个DIV都有“.column”。这些DIV的静态宽度为600px。只要它们有空间（即1200px容器），它们就会彼此相邻浮动

他们崩溃了，因为页面太小了。

如果您要保留2列，则需要将宽度设置为％，如下所示：

.column{
    ...
    width: 40%;
}

根据您的需求，您还必须对边距进行一些调整。

如果要保留2列直到某个大小，可以在包装元素上设置最小宽度，这样列就不会太小：

.wrapper{
    min-width:600px;
}

然后，您可以针对较小的屏幕尺寸运行媒体查询，这样您就可以将列折叠成一个用于移动电话之类的内容。

Answer 5

将列的css更改为此，它应该没问题。

.column {
    display: inline-block;
    margin:15px;
    width:40%;
}