Не хотите, чтобы текст был в центре - PullRequest
Новая
       43

Не хотите, чтобы текст был в центре

0 голосов
/ 02 июля 2018

Я никогда не программировал раньше или что-то еще, но у меня есть проект колледжа, в котором я должен редактировать макет. есть часть, в которой текст вроде как в центре, когда он достигает центра страницы, он пропускает к следующей строке ... я хочу, чтобы он продолжался нормально ... https://jsfiddle.net/nqpa6jh0/#&togetherjs=vORwosTiHV

.image.feature2 {
  display: block;
  margin: 0 0 0em 0;
}

.image.feature2 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.image.feature3 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: right;
<div class="wrapper style2">
  <section class="container">
    <header class="major">
      <h2>Depoimentos</h2>
      <span class="byline">Os viajantes recomendam.</span>
    </header>
    <div class="row no-collapse-1">
      <section class="">
        <a class="image feature2"><img src="images/pic02.jpg" alt=""></a>
        <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
      </section>
    </div>
  </section>
</div>

вот как это выглядит

enter image description here

Вот как я хотел, чтобы это выглядело (фотоделал первый):

enter image description here

1 Ответ

0 голосов
/ 02 июля 2018

Позвольте мне объяснить вам правильно.

Из фотошопа я вижу, чего вы пытаетесь достичь, а также ошибки в вашем коде. Их много.

Здесь: (избыточный код) 

.image.feature2 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.image.feature3 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: right;
}

Вы не используете классы должным образом. Классы предназначены для удаления избыточного кода в CSS. Давайте предположим, что вы добавили класс myParentClass в элемент div, содержащий разделы, а также удалили класс image feature2 для элемента a. Тогда HTML будет выглядеть так: 

<div class="myParentClass row no-collapse-1">
  <section class="">
    <a ><img src="images/pic02.jpg" alt=""></a>
    <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
  </section>
  <section class="">
    <a><img src="images/pic02.jpg" alt=""></a>
    <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
  </section>
</div>

Указанный выше css можно заменить на: 

.myClass section a img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left
}

.myParentClass section:nth-child(odd) a img {
  float: right;
}

И чтобы текст внутри элементов p не был перенесен, вам нужно добавить white-space": nowrap. Итак: 

.myParentClass section p {
  white-space: nowrap;
}

И чтобы иметь эффект пробела слева от odd элементов секции, вы должны использовать padding, т.е. 

.myParentClass section:nth-child(odd){
  padding-left: 50px;
}
...