Question

我有一个带有一些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的最佳方法的指针？

Answer 1

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>

Answer 2

使用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;
  }
}

Answer 3

我更新了CSS，以打开平板电脑768px来堆叠您要求的方式（width: 90%，左右边距为5％）。但是，我将采用另一种方法。我绝对不满意您的固定宽度。我不想将整个CSS和标记重做可能无法满足您需求的内容，因此我只添加了@media查询来回答您的问题。我会选择基于flex的方法，或者至少根据百分比寻找宽度，具体取决于您要寻找的东西。

.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>

更新：如果要停止在媒体查询中缩小使用期间发生的那不愉快的溢出，请使用大约1200px的值。但我仍然强烈建议采用更好的方法。

Answer 4

尝试使用媒体查询和flex容器。

有没有简单的方法可以将div用于移动设备和平板电脑堆叠，并使它们居中？

4 个答案: