當頁面寬度較低時，將兩列（div）分別排列在其他列下方

這裏是我的jsfiddlecode 如果更改水平尺寸，則divs（第1和第2部分）以橫向居中。但是如果寬度很低，第2部分將在第1部分下。問題是如何居中它們？我用包裝器嘗試了許多可能性，但沒有結果。你能幫我嗎？當頁面寬度較低時，將兩列（div）分別排列在其他列下方

來源

2014-03-27 SilentCry

嗯，我想我明白你的意思。那麼，因爲你的固定寬度爲#section_first和#section_second，我認爲這仍然可以通過（主要是）媒體查詢完成。雖然給予修復之前，需要幾件事情要改變：

首先，從你的#main定義中刪除display:inline-block，否則這將是有問題後居中的#main孩子。此外，請從#section_first和#section_second中刪除display:inline，因爲該樣式已完全被您應用於它們的浮動元素覆蓋，並且只會在稍後導致問題。現在

，重新安排你的HTML一下，讓#clearer允許#main擴展到其內容的大小（基本上，移動#clearer內#main）：

<div id="page_content"> 
    <div id="main"> 
     <div id="section_first">Section 1</div> 
     <div id="section_second">Section 2</div> 
    </div> 
    <div id="clearer"></div> 
</div>

在這一點上，沒有什麼應該真的在改變佈局 - 所以現在讓我們添加一些與響應媒體查詢：

@media (max-width:478px) { 
    div#section_first { 
     margin:0 auto; 
     float:none; 
    } 
    div#section_second { 
     margin:0 auto; 
     float:none; 
    } 
}

因爲#main計算的478px的最大寬度爲90％的寬度，其內容的組合寬度爲200px + 200px + 30px（margin）= 430px。和430px/0.9 = 477.777px，我們可以將它們四捨五入爲478px，以便在出現不需要的顯示問題之前使用替代樣式。媒體查詢中的樣式會停止子項的浮動，並將它們與常見的margin:0 auto對齊。

這裏是updated JSFiddle展示修改後的代碼。請注意，我還使用CSS刪除了<html>和<body>上的默認邊距。如果您有任何問題，請告訴我！

來源

2014-03-27 17:36:52 Serlite

非常感謝:-)你是上帝:-)一些關於浮點和顯示的新信息。 – SilentCry

太棒了，很高興我能幫忙！ – Serlite

我認爲Media Queries是你在找什麼。

它們允許您根據 - 例如 - 窗口寬度有條件地定義CSS樣式。

@media (min-width:450px) { 
    //some CSS to center the div. 
}

來源

2014-03-27 15:45:14

我正在使用媒體查詢。但我的代碼是移動設備的例子。在手機上允許第二個div先下。只有我需要的是將它們置於#main – SilentCry

那麼問題在哪裏？「如果寬度

您可以使用媒體查詢來執行此操作。

@media only screen and (max-width: 540px) { //Css here } 您需要找出什麼時候它似乎中斷，然後將最大寬度更改爲該值。並在您的媒體查詢CSS，而不是使用PX使用％。

但你也需要在你的主div上有一個寬度。 width:100%;

這裏是一個演示，下面的代碼：

DEMO： http://jsfiddle.net/QV26k/18/

* { 
    font-family: Arial, Helvetica, sans-serif; 
    color: white; 
    font-size: 12px; 
} 
body { 
    background-color: darkgreen; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
} 
div#page_content { 
    background-color: darkblue; 
    position: relative; 
    width: 90%; 
    max-width: 430px; 
    min-width: 220px; 
    padding: 10px 0px 10px 0px; 
    margin: 20px auto; 
} 
div#main { 
    background-color: pink; 
    position: relative; 
    display: inline-block; 
    margin: 0px auto; 
    width:100%; 
} 
div#section_first { 
    width: 200px; 
    background-color: yellow; 
    display: inline; 
    float: left; 
    margin-left: 10px; 
} 
div#section_second { 
    width: 200px; 
    background-color: red; 
    display: inline; 
    float: left; 
    margin-right: 10px; 
    margin-left: 10px 
} 
div#clearer { 
    clear:both; 
} 

@media only screen and (max-width: 540px) { 

div#section_first { 
    width: 46%; 
    background-color: yellow; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
} 
div#section_second { 
    width: 46%; 
    background-color: red; 
    display: inline; 
    float: left; 
    margin-right: 2%; 
    margin-left: 2%; 
} 
}

來源

2014-03-27 17:36:17 JCBiggar

當頁面寬度較低時，將兩列（div）分別排列在其他列下方

回答

相關問題