紧紧围绕调整大小
问题描述:
我想知道如果任何人有关于如何最好地迫使两个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 */
}
}
答
应该将媒体查询内部把下面的:
- 要阻止他们堆放未来给对方你需要删除
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>
+0
最后一个小问题。如果我想将它们定位在中心左侧的X像素,我将如何实现该结果? – COMisHARD
+0
@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;
}
替换'/ * * SOMETHING /'和'宽度:100%;浮动:左;明确:既;' – Gunaseelan
太好了!所有这些答案都有效。谢谢。最后一个小问题。如果我想将它们定位在中心左侧的X像素,我将如何实现该结果? – COMisHARD