如何使我的網頁固定布局？

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%;
}