在调整大小时将两个框居中
硬体
我想知道是否有人对调整页面大小时如何最好地迫使两个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对齐到左侧和右侧的对方。因此，我使用以下CSS：
#box1, #box2
{
float:left;
max-width:25em;
min-width:20em;
width:45%;
}
我要解决的问题是如何最好地使它们堆叠，然后在调整页面大小时居中。所需的外观是：
我知道我使用这样的媒体查询：
@media screen and (max-width: 800px)
{
#box1, #box2
{
/* SOMETHING */
}
}
隐藏的爱好
以下内容应放在您的媒体查询中：
- 要停止它们彼此相邻的堆叠，您需要将其卸下
float: left;。这是因为divs是block元素，将自动移至新行 - 您正在给
divs，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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在窗口调整大小时调整两个图片框的大小
- 2
在屏幕调整大小时将Div居中
- 3
CSS怀疑内联调整两个框的大小
- 4
在屏幕调整大小时用一个替换两个列表块
- 5
调整大小时使图像居中
- 6
调整大小时如何保持两个表的列宽同步？
- 7
调整窗口大小时并排对齐两个div，而不会变形
- 8
面板在表单中的对接。在调整大小时使两个面板“固定”
- 9
jQuery：在窗口调整大小时使两个div高度相同
- 10
调整窗口大小时，在其他两个div之间挤压一个div
- 11
扩展面板中的两个分组框，如何正确设置调整大小（拉伸和固定）？
- 12
将div水平和垂直居中，并在调整父级大小时保持居中
- 13
将两个开关垂直居中
- 14
将两个并排的ImageView居中
- 15
将两个div垂直居中
- 16
调整框架大小时，使圆心居中
- 17
调整框架大小时，使圆心居中
- 18
AngularJs相应地调整/调整两个div的大小
- 19
在NSAttributedString中将两个不同大小的字体垂直居中
- 20
将两个大小不同的数据框合并为一个
- 21
即使在调整大小时，也可以将div水平和垂直居中
- 22
调整浏览器大小时无法将下拉菜单居中
- 23
如何将内容大小优先级应用于自调整大小 UITableViewCell 内的两个视图
- 24
如何水平创建两个Div调整大小的Jquery
- 25
连续两个项目而无需调整大小-flexbox
- 26
html在两个调整大小的图像之间拟合文本
- 27
jQuery UI可调整大小的两个对象
- 28
WPF：按比例调整两个按钮的大小
- 29
可可调整两个堆叠表的大小
我来说两句