緊緊圍繞調整大小

我想知道如果任何人有關於如何最好地迫使兩個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 */ 
      } 
    }

來源

2015-08-28 COMisHARD

替換'/ * * SOMETHING /'和'寬度：100％;浮動：左;明確：既;' – Gunaseelan

太好了！所有這些答案都有效。謝謝。最後一個小問題。如果我想將它們定位在中心左側的X像素，我將如何實現該結果？ – COMisHARD

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

要阻止他們堆放未來給對方你需要刪除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>

來源

2015-08-28 15:12:07

最後一個小問題。如果我想將它們定位在中心左側的X像素，我將如何實現該結果？ – COMisHARD

@COMisHARD當你正在使用'margin'居中'div's你需要添加'位置：相對;'和'左：'** N **'PX;'（其中** N **是您想要移動的像素數量）。 https://jsfiddle.net/fjdr1g0e/ –

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

試試這個。

#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

來源

2015-08-28 15:13:22

緊緊圍繞調整大小

回答

相關問題