时间戳

首页 > 解决方案 > 如何以移动/平板电脑形式完美地居中“堆叠”列

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

问题描述

我去我的网站上放了两列。到目前为止一切看起来都很好，现在我希望它在移动/平板电脑中时完美居中。我在这里https://www.w3schools.com/howto/howto_css_two_columns.asp从 w3schools.com 获得了第 2 列。我能够将它从两列切换为以移动设备和平板电脑的形式堆叠在一起。现在我注意到另一个问题。

我希望文本完全居中，每当您调整浏览器的大小时，图像都会保持居中，并且当您调整大小时，文本将向下移动到下一行。因为我在手机上注意到，当你滚动时你仍然可以向右移动一点，所以我不想在移动设备中向右移动，我只想让它在一个完美堆叠的项目中直接向下，没有向右滚动。有点像在 Microsoft excel 或 word 中使用时自动换行。

当您运行代码片段时，您会注意到底部的“横向”滚动条显示，我不想横向滚动，我想垂直向下滚动。我该如何解决？我试过flex，我试过float off，我迷路了，救救我！我不确定在这里做什么。

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

标签： htmlcssresponsive-designflexboxmultiple-columns

解决方案

您可以将父行 div显示设置为flex，然后将flex-flow（由 flex 方向组成，如果它可以换行或不换行）设置为row wrap。现在它将占据 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/ ，特别是关于 flex 流程： https://www.w3schools .com/cssref/css3_pr_flex-flow.asp

推荐阅读