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

Question

基本上，您不会在jsFiddle中看到它，但是全屏显示时它是两列，但是，当您缩小屏幕时，它会折叠成只有一列-我不能找出我的CSS在哪里做！

Answer 1

这导致它：

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

如果wrapper的像素为1200px或更高，则inline-block将使它们彼此相邻放置，否则不会这样做。 如果不想包装，请设置最小宽度。

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

Answer 2

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

就像是

body {width:1500px;}

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

Answer 3

更改为

#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元素上设置最小宽度，这样列就不会太小：

.wrapper{
    min-width:600px;
}

然后，您可以针对较小的屏幕尺寸运行媒体查询，以便将诸如手机之类的列折叠为一列。

Answer 5

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

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