緊緊圍繞調整大小

Question

我想知道如果任何人有關於如何最好地迫使兩個div當一個頁面被調整至中心建議的兩個箱子。

下面是相關的html：

<div id="body"> 
    <div id="top"></div> 
    <div id="content"> 
     <div id="box1"></div> 
     <div id="box2"></div> 
    </div> 
    <div id="footer"></div> 
</div> 

我一般都希望箱1和箱2的div對齊到對方的left and right。所以我使用下面的CSS：

#box1, #box2 
    { 
     float:left; 
     max-width:25em; 
     min-width:20em; 
     width:45%; 
    } 

我想解決的問題是如何最好地讓他們堆疊，然後中心，如果頁面調整大小。所需的外觀是：

我知道我的使用媒體查詢是這樣的：

@media screen and (max-width: 800px) 
    { 
     #box1, #box2 
      { 
       /* SOMETHING */ 
      } 
    } 

Answer 1

應該將媒體查詢內部把下面的：

• 要阻止他們堆放未來給對方你需要刪除float: left;。這是因爲div s爲block元素，並會自動移動到新行
• 你給了div小號width因此增加margin: 0 auto;將使他們爲中心

#box1 { 
 
    background-color: red; 
 
} 
 
#box2 { 
 
    background-color: blue; 
 
} 
 
#box1, #box2 { 
 
    float: left; 
 
    max-width: 25em; 
 
    min-width: 20em; 
 
    width: 45%; 
 
} 
 
@media screen and (max-width: 800px) { 
 
    #box1, #box2 { 
 
    float: none; 
 
    margin: 0 auto; 
 
    max-width: 25em; 
 
    min-width: 20em; 
 
    width: 45%; 
 
    } 
 
}

<div id="box1">Box 1</div> 
 
<div id="box2">Box 2</div>

Answer 2

在這裏你不需要媒體查詢。

試試這個。

#content { 

    text-align: center; 
    display:inline-block; 
    border:thick dotted #060; 
    margin: 0px auto 10px auto; 
    width:100%; 
} 

#box1, 
#box2 
{ 

    max-width:25em; 
    min-width:20em; 
    width:45%; 
    height: 50px; 
    background: #999; 
    display: inline-block; 
    } 

Demo here