Question

我去了两列到我的网站。到目前为止，一切看起来都不错，现在我希望当它在手机/平板电脑中时能完全居中。我在https://www.w3schools.com/howto/howto_css_two_columns.asp的w3schools.com上获得了第2栏。我能够使它从两列切换为移动和平板电脑形式的堆叠。现在我注意到了另一个问题。

我希望文本完全居中，每当您调整浏览器大小时，图像将保持居中，并且在调整大小时，文本将向下移动到下一行。在我的手机上，滚动时仍然可以向右移动一点，所以我不想在移动设备中向右移动，我只希望它在一个完美堆叠的项目中向下滚动而无需滚动到对。在Microsoft Excel或Word中使用时，有点像自动换行。

运行代码段时，您会注意到显示了底部的“侧向”滚动条，并且我不想侧向滚动，而是想垂直向下滚动。 ？我尝试了flex，我尝试了浮动，我在这里迷路了，帮帮我！我不确定在这里做什么。

.column {
  float: left;
  text-align: center;
  width: 45%;
  padding: 10px;
  height: 500px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.steveJobs {
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.billGates {
  border-radius: 50%;
  width: 170px;
  height: 170px;
  margin: 60px;
}

@media only screen and (max-width: 800px) {
.column {
    width: 100%;
  }

  .billGates {
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 0;
  }
}

<div class="row">


  <div class="column">
    <p>"A lot of companies have chosen to downsize, and maybe that was the right thing for them. We chose a different path. Our belief was that if we kept putting great products in front of customers, they would continue to open their wallets."</p>
    <img src="https://img.washingtonpost.com/rf/image_480w/2010-2019/WashingtonPost/2015/08/31/Weekend/Images/wk-steve0904-4.jpg?uuid=x2flXFAgEeWMGQtoJapKOg" alt="Steve Jobs" class="steveJobs">
  </div>


  <div class="column">
    <p>"The world won't care about your self-esteem. The world will expect you to accomplish something BEFORE you feel good about yourself."</p>
    <img src="https://pbs.twimg.com/profile_images/988775660163252226/XpgonN0X_400x400.jpg" alt="Bill Gates" class="billGates">
  </div>


</div>    <!-- End of row div -->

Answer 1

您可以将父行div display 设置为 flex ，然后将 flex-flow （由flex方向组成，如果可以，包装或Nowrap）到行包装。现在，它将连续两列并排占据100％的宽度，直到到达断点为止，然后它们将在一个列中位于另一个之上。

将此添加到css文件的开头，它应该可以工作：

.row {
  display: flex;
  flex-flow: row wrap;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.column {
  float: left;
  text-align: center;
  width: 45%;
  padding: 10px;
  height: 500px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.steveJobs {
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.billGates {
  border-radius: 50%;
  width: 170px;
  height: 170px;
  margin: 60px;
}

@media only screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  .billGates {
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 0;
  }
}

<div class="row">


  <div class="column">
    <p>"A lot of companies have chosen to downsize, and maybe that was the right thing for them. We chose a different path. Our belief was that if we kept putting great products in front of customers, they would continue to open their wallets."</p>
    <img src="https://img.washingtonpost.com/rf/image_480w/2010-2019/WashingtonPost/2015/08/31/Weekend/Images/wk-steve0904-4.jpg?uuid=x2flXFAgEeWMGQtoJapKOg" alt="Steve Jobs" class="steveJobs">
  </div>


  <div class="column">
    <p>"The world won't care about your self-esteem. The world will expect you to accomplish something BEFORE you feel good about yourself."</p>
    <img src="https://pbs.twimg.com/profile_images/988775660163252226/XpgonN0X_400x400.jpg" alt="Bill Gates" class="billGates">
  </div>


</div>
<!-- End of row div -->

我还建议您花一些时间阅读有关CSS flex的更多信息： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 特别是关于弹性流： https://www.w3schools.com/cssref/css3_pr_flex-flow.asp

Answer 2

最简单的解决方法是在box-sizing: border-box中设置.column。

如何以移动/平板电脑形式完美地将“堆叠”列居中

2 个答案: