居中的網站佈局與不同大小的列和響應？

我期待創建一個像Joules.com的網站（或者至少是一個主頁）居中的網站佈局與不同大小的列和響應？

我基本上想要以不同的大小並排創建盒子，但希望它們調整大小或移動到一個新的行瀏覽器窗口調整大小（響應？）。它們也必須以中心爲中心。我可以達到我並排使用div的程度，但他們似乎並沒有被集中......這就是我迄今所擁有的。任何幫助將不勝感激。我在這個部門有些不知如何，但想學習！

CSS

#container { 
    width: 100%; 
    margin: 0 auto; 
    overflow: hidden; 
} 
#Womens { 
    height: auto 
    width: 241px; 
    float: left; 
    margin: 0 auto; 
    text-align:center; 
} 
#Mens { 
    height: auto 
    margin: 0 auto; 
    width: 241px; 
    float: left; 
    text-align:center; 
} 
#Footwear { 
    height: auto 
    margin: 0 auto; 
    width: 241px; 
    float: left; 
    text-align:center; 
} 
#Accessories { 
    height: auto 
    margin: 0 auto; 
    width: 241px; 
    float: left; 
    text-align:center; 
}

HTML

<body><center> 
<div id="container"> 
    <div id="Womens">Womens</div> 
    <div id="Mens">Mens</div> 
    <div id="Footwear">Footwear</div> 
    <div id="Accessories">Accessories</div> 
</div>

來源

2014-10-20 Jamescwrk

首先，在你不需要使用一個ID爲每個元素，因爲你的CSS代碼是每個人都使用相同的一個類名代替：

<div id="container"> 
    <div class="column">Womens</div> 
    <div class="column">Mens</div> 
    <div class="column">Footwear</div> 
    <div class="column">Accessories</div> 
</div>

則不要使用float因爲你不能居中這些元素，使用inline-block：

#container { 
    font-size:0; 
    text-align:Center; 
} 
.column { 
    font-size:14px; 
    display:inline-block; 
}

入住這Demo Fiddle

來源

2014-10-20 21:11:06 DaniP

我有這個解決方案的問題是，它在桌面上偉大的，但是當我預覽我的iPhone 5的div只分離到2每行，而不是1元的行。所以我無法看到兩個分部，因爲他們在屏幕外。 – Jamescwrk 2014-10-21 08:11:33

這個工程，你問...中心列和打破寬度的變化....所以這個答案的問題，請限制你的問題只有一個問題在時間。現在爲了滿足您的所有需求，您將需要使用媒體查詢。 – DaniP 2014-10-21 12:17:41

「或移動到瀏覽器窗口調整大小的新行」也是我原來的問題的一部分。抱歉的混淆。我需要的是每個div在達到移動寬度時着陸在新線路上...... – Jamescwrk 2014-10-21 13:21:59

你的CSS可能會簡單得多，通過使用一個類（Don't Repeat Yourself;））。

如果您將text-align: center;放在容器上，而不是容器本身及其子內容將居中。如果你想要的話，你可以覆蓋單獨列的設置，或者僅僅爲他們的內容。

您也使用了列寬的固定像素值，所以它們不能真正「響應」。你也可以在那裏使用百分比值，但是可能會有一些棘手的副作用。請注意，4列甚至auto頁邊距仍然需要爲< 100％，否則它們會很奇怪。它們也可能在較小尺寸下坍塌或重疊。您可以在容器或列上設置一個最小寬度以幫助防止這種情況發生，如果它們包裝，則可以使用它們將其分開以保持它們不分開。

另外，如果您只使用百分比寬度和內嵌塊，則列將在底部對齊。使用vertical-align: top;修復。你說最初你想要不同的高度，但如果你沒有，你可以設置一個最小或最大高度&把內容上的東西像overflow:scroll。

#container { 
 
    width: 100%; 
 
    min-width: 320px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    text-align:center; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    margin-bottom: 10px; 
 
    width: 20%; 
 
    min-width: 90px; 
 
    padding: 1%; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
    background-color: #678; 
 
    color: #fff; 
 
} 
 
.content { 
 
    background-color: #fff; 
 
    color: #333; 
 
    padding: 1em; 
 
    text-align: left; 
 
}

<body> 
 
    <div id="container"> 
 
     <div id="Womens" class="box">Womens 
 
     <div class="content">This is some left-aligned women's content about/for women. View the Code Snippet in fullscreen!</div> 
 
     </div> 
 
     <div id="Mens" class="box">Mens 
 
     <div class="content">This is some left-aligned men's content about/for men. If you resize the browser the columns will be responsive, but break after a certain point.</div> 
 
     </div> 
 
     <div id="Footwear" class="box">Footwear 
 
     <div class="content">This is some left-aligned footwear content about/for feet. Feet are weird.</div> 
 
     </div> 
 
     <div id="Accessories" class="box">Accessories 
 
     <div class="content">This is some left-aligned accessory content about stuff you men or women could potentially put on their feet, or whatever.</div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2014-10-20 22:01:14 mc01

我認爲他們在調整大小時太小了！幾乎不可讀。我希望他們能夠保持它們的尺寸，但在較小的顯示器（電話和平板電腦）上，它們本身就位於彼此之下。我可能不會盡我所能解釋這一點。 – Jamescwrk 2014-10-21 11:25:09

@Jamescwrk正如我上面所說的，你可以保持固定的像素寬度，或設置最小寬度屬性。在縱向模式下，在電話機列「min-width：300px;」左右。他們仍會在更大的屏幕尺寸上擴大一點。嘗試一下，看看有什麼作用。這只是一個玩的例子。另外，不客氣。 – mc01 2014-10-21 15:27:42

我必須以某種方式嘗試。我非常感謝你的幫助，謝謝。 – Jamescwrk 2014-10-21 18:31:11

居中的網站佈局與不同大小的列和響應？

回答

相關問題