紧紧围绕调整大小

我想知道如果任何人有关于如何最好地迫使两个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

紧紧围绕调整大小

回答

相关问题