Попытка выравнивания текста по левому краю в flex-контейнерах - PullRequest
Новая
       20

Попытка выравнивания текста по левому краю в flex-контейнерах

0 голосов
/ 16 апреля 2020

У меня есть раздел, в котором есть список шуток, где каждая шутка индивидуально содержится в div.

В каждой шутке есть два абзаца, которые я пытаюсь выровнять, чтобы они отображались слева (начало контейнера flex). Сейчас две основные проблемы, с которыми я сталкиваюсь, состоят в том, что первый абзац (Q :) не выравнивается по самому началу контейнера Я пытаюсь выровнять абзацы так, чтобы оба сокращение и вопрос переносятся на крайнюю левую границу содержимого контейнера.

Вторая проблема, с которой я сталкиваюсь, заключается в том, что второй абзац (A :) продолжает центрироваться в контейнере вместо отображения на левой стороне. Я не уверен, почему первый абзац не центрируется, а второй - при отображении веб-страницы.

В целом, я пытаюсь добиться этого ожидаемого отображения: enter image description here

Фрагмент: 

#joke-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}

#joke-cards div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  height: 400px;
  width: 300px;
  background-color: #9B580D;
  opacity: 80%;
  padding: 20px;
}

#joke-cards div img {
  height: 150px;
  width: 150px;
}

hr {
  width: 65%;
}

div p {
  align-content: flex-start;
}

.abbrv {
  font-size: 28px;
  color: #E0DBD7;
}

.answer {
  display: none;
  font-size: 24px;
  color: #191919;
}

#joke-cards div:hover .answer {
  display: inline;
}
<section id="jokes">
        <h2>Out Of This World Joke Inventory!</h2>
        <p>Hover over each joke to see the answer!</p>
        <div id="joke-cards">
          <div id="sun-joke">
            <img src="img/icon1.png" alt="Icon of shooting star">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
            <p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
          </div>

          <div id="tick-joke">
            <img src="img/icon2.png" alt="Icon of rocket blasting off">
            <hr>
            <p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
          </div>

          <div id="restaurant-joke">
            <img src="img/icon3.png" alt="Icon of flag on the Moon">
            <hr>
            <p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
            <p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
          </div>
     </div>
</section>

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

добавить ширину на тег p 100%

div p {
    width: 100%;
}
0 голосов
/ 17 апреля 2020

Из того, что я вижу, ваше свойство выравнивания элементов центрирует все по поперечной оси.

  1. Измените элементы выравнивания на flex-start, а затем используйте функцию выравнивания self для выравнивания изображения по центру.

  2. Используйте функцию align self на p теги и используйте на них flex-start.

Вероятно, также попробуйте добавить тег ширины, так как @Lalji предложил сделать все p одинаковыми. Вы также можете попробовать выравнивание текста по тегам p слева.

...