中心右浮動窗口調整大小

我有2個div，我設置爲在我的網站的桌面版本，並在移動/平板電腦版本，彼此相鄰，我想正確的div到在上面，左邊的div在下面，兩個人都集中在他們的父div中。我有它設置如下：中心右浮動窗口調整大小

<div id="right-top">right & top</div> 
<div id="left-top">left & bottom</div>

我的CSS是這樣的：

#right-top { 
    position: relative; 
    float:right; 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    background-color: #ddd; 
    margin: 0px auto; 
} 

#left-top { 
    position: relative; 
    float:right; 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    background-color: #666; 
    margin: 0px auto; 
}

他們浮動權，這樣我可以在較小的瀏覽器窗口頂部的右側股利。我如何讓它們集中在較小的瀏覽器上，而不是對齊到右側？

來源

2015-02-09 James Likeness

你有使用媒體查詢的麻煩或者不知道如何使用媒體查詢或有麻煩定心在媒體查詢的div？ – Huangism 2015-02-09 20:28:40

我不知道@media查詢，感謝您的建議！ – 2015-02-09 22:44:33

我會使用手機的第一個設計這意味着它定義瞭如何將首先在小型設備上，並逐步加入更多的規則，針對大屏幕做

<div class="my-div" id="right-top">right & top</div> 
<div class="my-div" id="left-top">left & bottom</div>

所以我們定義了2個div到一個類（.my-div）之間的通用規則（大部分東西），具體細節（＃右上角和＃左上角）然後在860像素（每個div爲430px乘以2）中設置一個斷點，然後才能將div浮動到右側。

.my-div{ 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

#right-top { 
    background-color: #ddd; 
} 

#left-top { 
    background-color: #666; 
} 

@media only screen and (min-width: 860px) { 
    .my-div{ 
     float: right; 
    } 
}

您可以測試它here

來源

2015-02-09 20:45:36 Agush

這非常有幫助，爲小型設備構建它然後從那裏上升的想法是我想的方式。謝謝你的幫助！ – 2015-02-09 22:45:08

@JamesLikeness很高興我能幫到你！ [此圖片]（http://bradfrost.com/wp-content/uploads/2012/03/43-650x487.png）闡述了移動第一思想背後的原因。如果你需要爲2件事情編寫相同的代碼，也請記住DRY（不要重複自己），它可能會被重構並提取到一個類中。 – Agush 2015-02-11 10:19:32

您可以使用@media查詢來響應佈局。

對於如：

@media (max-width: 769px){ 
    #right-top,#left-top{ 
     float: none;/*unset the floated div*/ 
    } 
}

demo

來源

2015-02-09 20:32:47

中心右浮動窗口調整大小

回答

相關問題