1

Как правильно сверстать картинки и текст как изображено ниже?

Картинка для помощи в вёрстке

Использовал много способов но не выходит.

Например, я пробовал Flexbox и с позиционированием. С помощью позиционирования остаются элементы пустые, а с помощью Flexbox не получается сделать самый нижний текст прижатым к его боковой картинке.

4
  • 1
    1) Можно уложиться в два блока, верхний и нижний, сделать абсолютную позицию картинки и всё. 2) Попробуйте display: grid; он идеально поможет вам в этой ситуации. Задайте 3х3 сетку и разместите текст и картинки как вам душе угодно будет, самое лучшее решение как по мне. Для таких задач он идеально подходит.
    – MoloF
    14 июн 2019 в 9:35
  • @MoloF а если сделать абсолютное позиционирование картинки то текст сдвинется к краю. 14 июн 2019 в 9:42
  • Так задайте ширину контейнера для картинки. Сделайте внутри блок с абсолютным позицированием и влепите высоту которую необходимо влепить. Плюс отступ задайте между блоками текста. Я же говорю, можно извращаться как угодно, но нужно ли это, когда несколькими строчками кода можно нормально всё расставить?
    – MoloF
    14 июн 2019 в 9:52
  • Левая картинка привязана к нижней линии правого текста? Что будет, если левый текст будет больше? Только картинка вниз поползет? или и картинка и текст?
    – Skywave
    14 июн 2019 в 10:05

3 ответа 3

1

С использованием display: grid; вы можете получить то что вам нужно.

Вам стоило бы изучить эту сетку, прежде чем сесть делать костыли. Вы можете извращаться и лепить position: absolute;, а нужно ли оно когда лёгким движением меняем флекс на грид и получаем желаемый результат.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font-family: sans-serif;
}

.container{
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 10px 0;
	display: grid;
	grid-template-areas: "left-text left-text right-img"
								"left-img null right-img"
								"left-img right-text right-text";
	grid-gap: 50px;
}

.left-text{ grid-area: left-text; }
.right-img{ grid-area: right-img; }
.right-text{ grid-area: right-text; }
.left-img{ grid-area: left-img; }

.img{
	max-width: 300px;
	background-color: rgba(0,0,0,0.1);
}
	.img img{
		width: 100%;
	}
<div class="container">
	<div class="text left-text">
		<h2>Рабочее время на объектах ремонта</h2>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui corrupti porro assumenda et. Suscipit voluptatibus, pariatur repudiandae culpa placeat eius quas voluptates quos, distinctio ipsa, repellat mollitia illum facilis! Neque. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur necessitatibus perspiciatis cumque, amet nemo nostrum adipisci doloribus impedit et, nisi iste! Officiis atque consectetur molestiae unde, aperiam iusto quis rerum.</span>
	</div>
	<div class="img right-img">
		<img src="https://www.mortenhansen.com/wp-content/uploads/2018/09/quiz-intro-image-2000x1720.png" alt="">
	</div>
	<div class="text right-text">
		<h2>Рабочее время на объектах ремонта</h2>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui corrupti porro assumenda et. Suscipit voluptatibus, pariatur repudiandae culpa placeat eius quas voluptates quos, distinctio ipsa, repellat mollitia illum facilis! Neque. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur necessitatibus perspiciatis cumque, amet nemo nostrum adipisci doloribus impedit et, nisi iste! Officiis atque consectetur molestiae unde, aperiam iusto quis rerum.</span>
	</div>
	<div class="img left-img">
		<img src="https://www.mortenhansen.com/wp-content/uploads/2018/09/quiz-intro-image-2000x1720.png" alt="">
	</div>
</div>

2
  • 3
    А нужно ли оно так "легким движением" отметать ie и другие где display: grid не поддерживается? мы же не знаем наверняка какая поддержка требуется автору. Но если все это уже принято во внимание и можно пожертвовать то почему бы нет 14 июн 2019 в 10:26
  • @Алексей caniuse.com/#feat=css-grid . Даже поддержка на IE существует. Со временем сетка заменит флексы, как это было и с ними в своё время. Пока-что поддержка отличная, не вижу проблем не использовать данный метод.
    – MoloF
    14 июн 2019 в 12:04
1

Простейший вариант с float Только важно управлять шириной правого текста, чтобы он оставался справа от картинки.

<div class="block">
  <div class="image"></div>
  <div class="text">
    <p>blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl </p>
  </div>
</div>
<div class="block bottom">
  <div class="image"></div>
  <div class="text">
    <p>blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl </p>
  </div>
</div>
.block .image {
  float: right;
  width: 300px;
  height: 200px;
  background: #ccc;
}
.block:nth-child(2n) .image {
  float: left;
}
.block.bottom .text {
  display: inline-block;
  width: 500px;
}

https://jsfiddle.net/skywave/t60pcmrx/11/

-1

Видимо имелось ввиду что то такое, но как без js вам помочь я не представляю. Думаю из этого сами доделаете как вам это необходимо.

var items = document.querySelectorAll('.item');

items.forEach(function(item, index) {
	if( index ) {
  	var prevItem = items[index-1];
    var textPrevItem = prevItem.querySelector('.text');
    var heightTextBlock = textPrevItem.scrollHeight;
    var heightContentTextBlock = textPrevItem.querySelector('.text-wrap').scrollHeight;
    var imgItem = item.querySelector('img');
    imgItem.style.transform = 'translateY(-' + (heightTextBlock - heightContentTextBlock) + 'px)';
  }
})
.item {
  display: flex;
  margin-bottom: 10px;
}
.item:nth-of-type(odd) {
  flex-direction: row-reverse;
}
.item .text {
  display: flex;
  flex-direction: column;
}
.item h3 {
  margin: 0;
  margin-bottom: 15px;
}
.item p {
  margin: 0;
}
<div class="container">
  <div class="item">
    <img src="http://via.placeholder.com/250x250">
    <div class="text">
      <div class="text-wrap">
        <h3>Lorem ipsum dolor sit.</h3>
        <p>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam optio voluptate voluptatem tenetur obcaecati quos doloremque cum, non a, modi alias, quo cupiditate quaerat, odio. Magni enim illum quia, earum.</span>
          <span>Eum placeat odit fugiat voluptate et molestias at, perferendis necessitatibus quaerat accusamus labore perspiciatis corrupti explicabo mollitia neque, reprehenderit animi rem incidunt? Facilis totam architecto similique, fugit in ducimus consequatur!</span>
        </p>
      </div>
    </div>
  </div>
  <div class="item">
    <img src="http://via.placeholder.com/250x250">
    <div class="text">
      <div class="text-wrap">
        <h3>Lorem ipsum dolor sit.</h3>
        <p>
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam optio voluptate voluptatem tenetur obcaecati quos doloremque cum, non a, modi alias, quo cupiditate quaerat, odio. Magni enim illum quia, earum.</span>
          <span>Eum placeat odit fugiat voluptate et molestias at, perferendis necessitatibus quaerat accusamus labore perspiciatis corrupti explicabo mollitia neque, reprehenderit animi rem incidunt? Facilis totam architecto similique, fugit in ducimus consequatur!</span>
        </p>
      </div>
    </div>
  </div>
</div>

2
  • Нижняя картинка не заходит наверх, она должна быть на уровне верхней. 14 июн 2019 в 9:35
  • @ДаниилСухих не успевает загрузиться изображения у вас видимо до срабатывания скрипта (проверил все ок, поставьте высоту минимальную или повесьте все это на события полной загрузки изображений) 14 июн 2019 в 9:53

Ваш ответ

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

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