Question

我在div元素中有三个数字，设置为显示表格。我需要将数字划分为多行，以便在较窄的设备上获得更好的体验。

请在整页运行代码段，然后缩小屏幕尺寸（例如356px）。

What I want:
case1: margin|div|div|div|margin
--------------------------------
case2: margin|div|div|margin
       margin|div|   |margin
--------------------------------
case3: margin|div|margin
       margin|div|margin
       margin|div|margin

解决了！ ...添加了代码+ eddited片段，随时尝试：）

Edit1：设置为显示的aboutqi类：table和margin：auto。在宽屏幕上只有一行，边距工作完美=它居中。但是当有2或3行边距停止工作且aboutqiitems不居中时。

.aboutqi { 
  margin: auto;
  display: table;
}

.aboutqiitems {
  float: left;
}

.aboutqiitem {
  float: left;
  margin-right: 0px;
  margin-bottom: 30px;
  width: 200px;
}

.aboutqiitem-inner {
  width: 100%;
  margin: auto;
}
.num {
  margin: 0px;
  margin-bottom: 20px;
  padding-left: 13px;
  font-size: 48px;
  font-weight: bold;
  color: #014493;
}

.num-center {
  margin: auto;
  display: table;
}

.num-center-last {
  margin: auto;
  display: table;
  position: relative;
  left: -7px;
}

/* My solution */
.aboutqiitems-solved {
  float: left;
}

@media screen and (max-width: 616px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: calc((100% - 400px)/2);
  }
}

@media screen and (max-width: 416px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: calc((100% - 200px)/2);
  }
}

@media screen and (max-width: 216px) {
 .aboutqiitems-solved {
    max-width: 100%;
    clear: both;
    padding-left: 0px;
  }
}

<div class="aboutqi">
      <p>Hello, need to center numbers when there is more than 1 row.</p>
      <div class="aboutqiitems">
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">1</p></div>
          </div>
        </div>
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">2</p></div>
          </div>
        </div>
        <div class="aboutqiitem last">
          <div class="aboutqiitem-inner">
            <div class="num-center-last"><p class="num">3</p></div>
          </div>
        </div>
      </div>
    </div>
    </br>
    </br>
    <!-- My Solution -->
    <div class="aboutqi">
      <p>How I solve it. Fell free to change page width :)</p>
      <div class="aboutqiitems-solved">
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">1</p></div>
          </div>
        </div>
        <div class="aboutqiitem">
          <div class="aboutqiitem-inner">
            <div class="num-center"><p class="num">2</p></div>
          </div>
        </div>
        <div class="aboutqiitem last">
          <div class="aboutqiitem-inner">
            <div class="num-center-last"><p class="num">3</p></div>
          </div>
        </div>
      </div>
    </div>

示例：http://www.dcit.sk/ ...几乎位于页面底部

Answer 1

从我对这个问题的看法，你想在屏幕宽度达到一定宽度时改变css。最简单的方法是使用@media标记。

这是我解决这个问题的css。

 <style>
 .aboutqi { 
     margin: auto;
     display: table;
 }
 .aboutqiitems {
     float: left;
 }
 .aboutqiitem {
     float: left;
     margin-right: 0px;
     margin-bottom: 30px;
     width: 200px;
 }
 .aboutqiitem-inner {
     width: 100%;
     margin: auto;
  }
  .num {
     margin: 0px;
     margin-bottom: 20px;
     padding-left: 13px;
    font-size: 48px;
    font-weight: bold;
    color: #014493;
  }
  .num-center {
    margin: auto;
    display: table;
  }
  .num-center-last {
     margin: auto;
     display: table;
     position: relative;
     left: -7px;
 }
 @media only screen and (max-width: 615px){
     .aboutqiitem{
         width: 100%;
     }
     .aboutqiitems{
         width: 100%;
     }
     .num{
         padding: 0;
     }
     .num-center-last {
         left: 0;
     }
 }
 </style>

请注意，您还需要在头标记中设置带有元标记的视口宽度。

<meta content="width=device-width" name="viewport">

这也有效： @media only screen and（max-width：615px）{ .aboutqiitems { float：none; } .aboutqiitem { float：none; 保证金：自动; } .num中心，最后{ 职位：继承; } }

Answer 2

您应该在CSS表格中使用媒体查询来帮助解决这个问题。看起来你的数字在616px左右分成2行，所以你想沿着以下几行做点什么：

@media screen and (max-width: 616px) {
  .aboutqiitems {
    width: 100%;
  }
  .aboutqiitem {
    display: block;
    clear: both;
    width: 100%;
  }
}

这是一个jsfiddle，它显示了额外的代码及其工作原理：https://jsfiddle.net/4be1k4jr/

您可以在此处详细了解媒体查询及其使用方法： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如果您希望将这些框保持在200px而不是100％（如果您有图像或其他内容），则可以使用以下媒体查询。它不太干净，但是如果你绝对必须保持200px，那就有效。

@media screen and (max-width: 616px) {
  .aboutqiitems {
    width: 100%;
  }
  .aboutqiitem {
    display: block;
    clear: both;
    width: 200px;
    position: relative;
    left: 50%;
    margin-left: -100px;
  }
}

包含更多行的居中表

2 个答案: