2

введите сюда описание изображения

Как можно сделать так, чтобы текст был по краям, а изображение по центру?

1 ответ 1

4

Можно с помощью flex:

* {
  margin: 0;
  padding: 0;
}

.wrapper,
.text,
img {
  margin: 1rem;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.text {
  position: relative;
  flex-basis: 30%;
}

.text::before {
  content: "\25BA";
  color: crimson;
  position: absolute;
  left: -1rem;
}

@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }
}
<div class="wrapper">
  <div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore cumque, odio consequatur, dolores hic a perferendis nemo ab temporibus ex quia aliquam molestiae explicabo? Reiciendis cupiditate perferendis aspernatur quos odio.</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi placeat reiciendis laudantium similique totam quaerat numquam veritatis qui vitae eveniet, voluptates debitis necessitatibus, iusto exercitationem nostrum adipisci cum cumque illum.</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. A rem eveniet molestias maxime odio. Fugit ea tenetur dolores facilis, quos laborum omnis est sint beatae illo distinctio? Natus, maxime aspernatur!</div>
  </div>
  <img src="https://via.placeholder.com/200x250" alt="1">
  <div>
    <div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, sed distinctio. A voluptate minima repellat voluptatibus maiores! Dolore eveniet laudantium, autem molestiae asperiores laboriosam unde perferendis deserunt, harum temporibus quidem.</div>
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur tempora, neque dolores cupiditate facilis error rem totam, repellendus suscipit magnam, porro esse possimus! Quasi cumque eligendi maiores, tempora laudantium et!</div>
    <div class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat enim quo at ut. Nemo optio eveniet ducimus nesciunt, voluptate necessitatibus voluptas reprehenderit numquam consequatur, animi rem nam odit qui maiores?</div>
  </div>
</div>

4
  • 2
    хороший ответ, адаптивность реализована 15 апр 2018 в 15:02
  • А если элемент который before захочу подвинуть левее как сделать чтоб не выходил за экран и у правого блока не налезал на картинку?*
    – Олег
    15 апр 2018 в 16:37
  • @Олег, изменил ответ.
    – Arthur
    15 апр 2018 в 16:42
  • 1
    @Олег, если вам помог ответ, не забудьте отметить его решением
    – Arthur
    17 апр 2018 в 7:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.