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

Question

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

基本上，您在jsFiddle中看不到它，我不认为，但是全屏时它是两列，但是，当您缩小屏幕时，它会折叠成一列-我不能弄清楚它在我的 CSS 中的哪个位置！

Answer 1

这导致它：

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

如果您的像素为 1200 像素或更高，这inline-block将导致它们彼此相邻wrapper，否则不会。如果您不想换行，请设置最小宽度。

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

Answer 2

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

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

Answer 3

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

就像是

body {width:1500px;}

这会迫使正文溢出屏幕并将列彼此相邻放置。否则，屏幕的宽度（或“查看区域”）会设置width选择器的宽度，body因为它的默认值为width:auto.

Answer 4

将 CSS 更改为

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

和

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

Answer 5

这很简单：

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

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

他们崩溃是因为页面对他们来说太小了。

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

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

您还必须对利润进行一些调整，具体取决于您要查找的内容。

如果你想保持 2 列直到一定大小，你可以在你的包装元素上设置一个最小宽度，这样你的列就不会变得太小：

.wrapper{
    min-width:600px;
}

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