有没有一种简单的方法来为手机和平板电脑堆叠div并保持它们居中？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有没有一种简单的方法来为手机和平板电脑堆叠div并保持它们居中？相关的知识，希望对你有一定的参考价值。
我有一个带有一些div的容器，可以让3个盒子水平显示。
我试图让div在移动设备和平板电脑上垂直（居中）堆叠。我遇到的问题是我正在使用的媒体查询和样式似乎没有正常工作。
<div class="container-2">
<div class="box">
<div class="icon"><i class="fa fa-compact-disc" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Artists</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-calendar-alt" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Calendar</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
</div>
.container-2
position: relative;
width: 1200px;
height: 300px;
margin: 100px auto;
.container-2 .box
position: relative;
width: calc(400px - 30px);
height: calc(350px - 30px);
background: #0000005b;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
在手机和平板电脑加上中心时，3个div（它们是盒子）将从水平到垂直。
有关对齐/移动div的最佳方法的任何指针？
答案
display: flex将成为你的朋友 - 你在断点处更改flex-direction并调整flex设置：
.container
display: flex;
justify-content: space-around;
height: 100vh;
width: 100vw;
.inner
height: 100px;
width: 100px;
background-color: red;
@media screen and (max-width: 768px)
.container
flex-direction: column;
align-items: center;
.inner
background-color: blue;
<div class="container">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>另一答案
使用flexbox将使此任务变得更加容易。 Codepen的链接是here。
html和CSS的粗略版本如下：
HTML：
<div class="container-2">
<div class="box">
<div class="icon"><i class="fa fa-compact-disc" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Artists</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-calendar-alt" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Calendar</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
</div>
CSS：
.container-2
position: relative;
width: 1200px;
height: 300px;
margin: 100px auto;
display: inline-flex;
.container-2 .box
position: relative;
width: calc(400px - 30px);
height: calc(350px - 30px);
background: #0000005b;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
display: flex;
@media screen and (max-width:800px)
.container-2
flex-direction: column;
width: 70vw;
另一答案
我更新了你的CSS以打开平板电脑768px以你所要求的方式堆叠（width: 90%左/右边距为5％）。但是我会采取不同的方法。我对你的固定宽度感到非常满意。我不想将整个CSS和标记重新编写为可能不符合您需求的内容，因此我只添加了@media查询来回答您的问题。我会选择基于弹性的方法或至少一些基于百分比的宽度，具体取决于您的需求。
.container-2
position: relative;
width: 1200px;
height: 300px;
margin: 100px auto;
.container-2 .box
position: relative;
width: calc(400px - 30px);
height: calc(350px - 30px);
background: #0000005b;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
@media (max-width: 768px)
.container-2 .box
width: 90%;
margin: 15px 5%;
.container-2
width: 100%;
<div class="container-2">
<div class="box">
<div class="icon"><i class="fa fa-compact-disc" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Artists</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-calendar-alt" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Calendar</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
<div class="box">
<div class="icon"><i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<div class="content">
<h3>Contact Us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, nam quae quasi enim, praesentium, deserunt voluptatibus dolores laboriosam ex odio quod aperiam ipsa aspernatur soluta suscipit et iusto quas impedit.</p>
</div>
</div>
</div>另一答案
尝试使用媒体查询和弹性容器。
以上是关于有没有一种简单的方法来为手机和平板电脑堆叠div并保持它们居中？的主要内容，如果未能解决你的问题，请参考以下文章
如何使 div 堆叠没有空格并保留较小尺寸的顺序 - 在 Bootstrap 中
在引导程序中没有额外的 clearfix 时，Div 不会堆叠