爲什麼我的列使用窗口大小進行換行？

Question

我試圖在瀏覽器窗口調整大小時保持其結構的網頁上均勻間隔地添加四列。我基於現在找不到的教程來構建它。在調整瀏覽器窗口大小之前，它們顯得很好。任何人都可以告訴我爲什麼當瀏覽器窗口調整大小時，我的第3列和第4列繼續封裝在前兩個列之下？

#ColumnMain { 
 
    width: 100%; 
 
    height: auto; 
 
    float: left; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    min-width: 44% 
 
} 
 

 
.col1 { 
 
    float: left; 
 
    padding: 10px 20px 15px 20px; 
 
    margin: 0; 
 
    width: 350px; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col2 { 
 
    float: left; 
 
    padding: 10px 20px 15px 20px; 
 
    margin-left: 10px; 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col3 { 
 
    float: right; 
 
    padding: 10px 20px 15px 20px; 
 
    margin: 0; 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
    overflow: hidden; 
 
} 
 

 
.col4 { 
 
    float: right; 
 
    padding: 10px 20px 15px 20px; 
 
    margin-right: 10px; 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
    Overflow: hidden; 
 
}

<div class="columns" id="ColumnMain"> 
 
    <div class="col1">content</div> 
 
    <div class="col2">content</div> 
 
    <div class="col3">content</div> 
 
    <div class="col4">content</div> 
 
</div>

Answer 1

您指定不同的寬度，第一列等欄目，使之改變大小就應該給個寬度，或者你必須使用引導CSS。

而且還有保證金，它不會以相同的百分比寬度工作。在這種情況下，必須在應用相對於窗口/文檔寬度的邊距/填充後計算每個列寬，然後應用寬度樣式。您還必須在窗口大小調整事件上計算相同的值。從您的欄目風格

刪除保證金，並添加下面一個屬性：

box-sizing:border-box; 

出於測試目的，我必須改變你的第一列寬度200像素，更好地25％的寬度分配給每一列測試。

#ColumnMain { 
 
     width: 100%; 
 
     height: auto; 
 
     float: left; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     min-width: 44% 
 
    } 
 

 
    .col1 { 
 
     float: left; 
 
     padding: 10px 20px 15px 20px;  
 
     width: 200px; 
 
     height: 100px; 
 
     border-left: solid 1px #35488C; 
 
     box-sizing:border-box; 
 
    } 
 

 
    .col2 { 
 
     float: left; 
 
     padding: 10px 20px 15px 20px;  
 
     width: 22%; 
 
     height: 100px; 
 
     border-left: solid 1px #35488C; 
 
     box-sizing:border-box; 
 
    } 
 

 
    .col3 { 
 
     float: left; 
 
     padding: 10px 20px 15px 20px;  
 
     width: 22%; 
 
     height: 100px; 
 
     border-left: solid 1px #35488C; 
 
     overflow: hidden; 
 
     box-sizing:border-box; 
 
    } 
 

 
    .col4 { 
 
     float: left; 
 
     padding: 10px 20px 15px 20px;  
 
     width: 22%; 
 
     height: 100px; 
 
     border-left: solid 1px #35488C; 
 
     Overflow: hidden; 
 
     box-sizing:border-box; 
 
    }

<div class="columns" id="ColumnMain"> 
 
    <div class="col1">content</div> 
 
    <div class="col2">content</div> 
 
    <div class="col3">content</div> 
 
    <div class="col4">content</div> 
 
</div>

Answer 2

你COL1是350像素的寬度。一旦達到一定的尺寸，22％+ 22％+ 22％+ 350px比ColumnMain的寬度大。所以它推動了一些列，所以他們都可以適應。

Answer 3

你的div被相互包裝的原因是因爲當瀏覽器調整大小時，它會觸及你在這些單獨的.col類上的寬度，並且它不再適合，所以div就會相互疊加。

Answer 4

只是簡單地重寫CSS以便您只需要一個列選擇器就更簡單，更簡單。這使代碼更易於維護和更改。例如，您只需在一個位置更改邊框或填充，並且它將自動適用於應用該類的所有元素。這裏是你想實現什麼簡化代碼：

.col { 
 
    float: left; 
 
    padding: 10px 20px 15px 20px; 
 
    margin: 0; 
 
    width: 25%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
    box-sizing: border-box; 
 
}

<div> 
 
    <div class="col">content</div> 
 
    <div class="col">content</div> 
 
    <div class="col">content</div> 
 
    <div class="col">content</div> 
 
</div>

這裏是gifv格式輸出的一個例子：http://i.imgur.com/VgBByqf.gifv

如果你決定，你不想要在第一列（最左邊一列）之前的邊界線，在您的CSS代碼中，您將在.col選擇器下面添加此僞類：

.col:first-child { 
    border-left: none; 
} 

Answer 5

您將第一列的固定寬度設置爲不適應，並且推回最後一個div。如果你需要一個固定的寬度，但仍想保持每個div內聯，你可以使用display: table;佈局。這樣你的第一個div總是會有相同的大小，而其他的則是動態的。

#ColumnMain { 
 
display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    min-width: 44% 
 
} 
 

 
.col { 
 
    display: table-cell; 
 
    padding: 10px 20px 15px 20px; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col1 { 
 
    margin: 0; 
 
    width: 350px; 
 
} 
 

 
.col2 { 
 
    margin-left: 10px; 
 
    width: 22%; 
 
} 
 

 
.col3 { 
 
    margin: 0; 
 
    width: 22%; 
 
    overflow: hidden; 
 
} 
 

 
.col4 { 
 
    margin-right: 10px; 
 
    width: 22%; 
 
    overflow: hidden; 
 
}

<div class="columns" id="ColumnMain"> 
 
    <div class="col col1">content</div> 
 
    <div class="col col2">content</div> 
 
    <div class="col col3">content</div> 
 
    <div class="col col4">content</div> 
 
</div>

Answer 6

<html> 
 
     <head>  
 
     <style> 
 
     .cols_ex {  
 
     -webkit-columns: 4 10px;  
 
     -moz-columns: 4 10px;  
 
      columns: 4 10px;  
 
     -webkit-column-gap: 2em;  
 
     -moz-column-gap: 2em;  
 
      column-gap: 2em;  
 
     -webkit-column-rule: 2px dashed gray;  
 
     -moz-column-rule: 2px dashed gray;  
 
      column-rule: 2px dashed gray; 
 
     } 
 
     </style> 
 
     </head> 
 
     <body>  
 
     <div class="cols_ex">   
 
     <p>Just at this moment her head struck against the roof of the hall: in fact she was now rather more than nine feet high, and she at once took up the little golden key and hurried off to the garden door.</p>   
 
     <p>Poor Alice! It was as much as she could do, lying down on one side, to look through into the garden with one eye; but to get through was more hopeless than ever: she sat down and began to cry again.</p>   
 
     <p>"You ought to be ashamed of yourself," said Alice,"a great girl like you" (she might well say this), "to go on crying in this way! Stop this moment, I tell   you!"</p>   
 
     <p>But she went on all the same, shedding gallons of tears,until there was a large pool all round her, about four inches deep, and reaching half down the hall.</p>  
 
     </div> 
 
     </body> 
 

 

 
</html>

Answer 7

正如其他人所說，.col1具有固定的寬度，所以在某些時候，在另一列中的基於百分比寬度除固定寬度將大於100％寬度，導致列包裹。

一個更現代的方式來創建這樣的一排列是使用display: flex，這將把它們放在一行，他們不會換行（除非你指定你想要使用flex-wrap包裝）。

這裏是一個@media查詢的例子，它將在不同的屏幕寬度下以不同的方式放置列/行。

.columns { 
 
    min-width: 44%; 
 
    margin: auto; 
 
    display: flex; 
 
} 
 

 
.col { 
 
    padding: 10px 20px 15px 20px; 
 
} 
 

 
.col1 { 
 
    width: 350px; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col2 { 
 
    margin-left: 10px; 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col3 { 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
.col4 { 
 
    margin-right: 10px; 
 
    width: 22%; 
 
    height: 100px; 
 
    border-left: solid 1px #35488C; 
 
} 
 

 
@media (max-width: 420px) { 
 
    .columns { 
 
    flex-direction: column; 
 
    } 
 
    .col { 
 
    margin: 0; 
 
    width: auto; 
 
    } 
 
}

<div class="columns" id="ColumnMain"> 
 
    <div class="col1 col">content</div> 
 
    <div class="col2 col">content</div> 
 
    <div class="col3 col">content</div> 
 
    <div class="col4 col">content</div> 
 
</div>