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

【问题标题】：How can I make my web page fixed-layout?如何使我的网页固定布局？
【发布时间】：2012-02-29 22:58:13
【问题描述】：

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

【问题讨论】：

【解决方案1】：

这导致它：

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

如果您的wrapper 大于或等于 1200 像素，inline-block 将使它们彼此相邻，否则不会。如果您不想换行，请设置最小宽度。

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

【讨论】：

【解决方案2】：

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

类似

body {width:1500px;}

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

【讨论】：

【解决方案3】：

把css改成

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

和

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

【讨论】：

【解决方案4】：

这很简单：

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

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

它们折叠起来是因为页面对它们来说太小了。

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

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

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

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

.wrapper{
    min-width:600px;
}

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

【讨论】：

【解决方案5】：

把列的css改成这个应该没问题。

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

【讨论】：