Как идеально центрировать «сложенные» столбцы в форме мобильного телефона / планшета - PullRequest
Новая
       49

Как идеально центрировать «сложенные» столбцы в форме мобильного телефона / планшета

0 голосов
/ 22 февраля 2019

Я пошел, чтобы поместить две колонки на мой сайт.Пока все выглядит хорошо, теперь я хочу, чтобы он был идеально отцентрирован, когда он был в мобильном телефоне / планшете.Я получил 2 столбца от w3schools.com здесь https://www.w3schools.com/howto/howto_css_two_columns.asp. Я смог переключить его с двух столбцов на штабелирование друг на друга в форме мобильного телефона и планшета.Теперь я заметил еще одну проблему.

Я хочу, чтобы текст был идеально отцентрирован, и всякий раз, когда вы изменяете размеры браузера, изображение будет центрироваться, а текст будет перемещаться к следующей строке при изменении размера.это. Поскольку я заметил на своем телефоне, вы все еще можете немного переместиться вправо, когда вы прокручиваете, поэтому я не хочу перемещаться вправо в мобильном телефоне, я просто хочу это прямо видеально сложенный предмет без прокрутки вправо.Вроде как перенос текста при использовании в Microsoft Excel или Word.

Когда вы запустите фрагмент кода, вы заметите, что отображается нижняя полоса прокрутки "в сторону", и я не хочу прокручивать вбок,Я хочу прокрутить вертикально вниз. Как это исправить?Я попытался согнуть, я попытался отплыть, я заблудился здесь, помогите мне!Я не уверен, что делать здесь. 

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

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Самое простое решение вашей проблемы - установка box-sizing: border-box в .column.

0 голосов
/ 22 февраля 2019

Вы можете установить родительскую строку div display в flex , а затем flex-flow (состоит из направления гибкости и может ли оно наматываться или наматываться)) до перенос строки .Теперь он будет занимать 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 flow: https://www.w3schools.com/cssref/css3_pr_flex-flow.asp

...