1

Не могу понять, почему блоки не на одной линии. "Лорэмы" по количеству слов одинаковые, картинки специально задал одним размером... Ничего не даёт, и псевдокласс вообще непонятно себя ведёт. Почему такое поведение?

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

.our-work {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.section1,
.section2,
.section3,
.section4 {
  text-align: center;
  margin: 25px;
}

.section1:after {
  display: block;
  content: "";
  height: 4px;
  width: 40%;
  background-color: #f1eee9;
  margin: 0 auto;
}

.section2:after {
  display: block;
  content: "";
  height: 4px;
  width: 40%;
  background-color: #f1eee9;
  margin: 0 auto;
}

.section3:after {
  display: block;
  content: "";
  height: 4px;
  width: 40%;
  background-color: #f1eee9;
  margin: 0 auto;
}

.our-work img {
  padding-bottom: 1em;
}

.our-work span {
  font-size: 1.4em;
  font-weight: 700;
  color: #555555;
}

.our-work p {
  color: #555555;
  font-size: 1em;
  font-weight: 400;
}
<section class="work-block">
  <div class="our-work">
    <div class="section1">
      <img src="img/icon1.png" alt=""><br>
      <span>Web & App Design</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
    </div>
    <div class="section2">
      <img src="img/icon2.png" alt=""><br>
      <span>Development</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
    </div>
    <div class="section3">
      <img src="img/icon3.png" alt=""><br>
      <span>Customization</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p><br><span class="bor"></span>
    </div>
    <div class="section4">
      <img src="img/icon4.png" alt=""><br>
      <span>Marketing</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
    </div>
  </div>
</section>

6
  • не на одной линии, потому что название вкладки занимает не одну, а две строчки
    – Dmytro
    11 ноя 2018 в 10:32
  • @Дмытрык, не совсем понял,можете перефразировать? 11 ноя 2018 в 10:46
  • 1
    первый заголовок имеет две строки и потому перенеслось 11 ноя 2018 в 11:05
  • @UbuntuUser, это на скриншоте так, оно на одной линии. Ладно ,хорошо, допустим из-за переноса а другие 3 из-за чего? 11 ноя 2018 в 11:10
  • 1
    ну вот смотри codepen.io/anon/pen/OaRjxr 11 ноя 2018 в 11:19

2 ответа 2

2
  1. В блоке section3 после параграфа есть <br/>
  2. И как сказали выше <span> для section1 занимает две строки.

Решить можно таким способом:

.work-block {
	width: 800px;
}

.our-work {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: space-between;
}

.section1,
.section2,
.section3,
.section4 {
	text-align: center;
	margin: 25px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.section1:after {
	display: block;
	content: "";
	height: 4px;
	width: 40%;
	background-color: #f1eee9;
	margin: 0 auto;
}

.section2:after {
	display: block;
	content: "";
	height: 4px;
	width: 40%;
	background-color: #f1eee9;
	margin: 0 auto;
}

.section3:after {
	display: block;
	content: "";
	height: 4px;
	width: 40%;
	background-color: #f1eee9;
	margin: 0 auto;
}

.our-work img {
	padding-bottom: 1em;
}

.our-work span {
	font-size: 1.4em;
	font-weight: 700;
	color: #555555;
}

.our-work p {
	color: #555555;
	font-size: 1em;
	font-weight: 400;
}
<section class="work-block">
    <div class="our-work">
        <div class="section1">
            <img src="img/icon1.png" alt=""><br>
            <span>Web & App Design</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
        </div>
        <div class="section2">
            <img src="img/icon2.png" alt=""><br>
            <span>Development</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
        </div>
        <div class="section3">
            <img src="img/icon3.png" alt=""><br>
            <span>Customization</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p><span class="bor"></span>
        </div>
        <div class="section4">
            <img src="img/icon4.png" alt=""><br>
            <span>Marketing</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, minus deleniti commodi quasi ipsum voluptatum.</p>
        </div>
    </div>
</section>

7
  • Точно,моя невнимательность... Но все же я убрал и они все равно не стоят в одной плоскости. 1 и 3 блок ниже идут чем 2 и 4. и даже 1 и 3 не в одной линии, блоки идентичны,все были копированы, колиличество текста одинаково везде. 11 ноя 2018 в 11:05
  • 1
    Тоесть Вы сократили строку "Web & App Design" до одной линии, убрали <br/> и 1, 2, 3 по прежнему не в одной линии? 11 ноя 2018 в 11:11
  • 1
    Насчет 4 элемента ("Marketing") там нет псевдоэлемента, поэтому оно не выравнивается со всеми 11 ноя 2018 в 11:12
  • 1
    i.imgur.com/PGkjFJZ.png 11 ноя 2018 в 11:12
  • 1
    да, картинкам нужно задать размеры 11 ноя 2018 в 11:31
0

Все эти попытки решить проблему на чистом css тут скорее всего провалятся. Заголовки блоков в будущем могут поменяться, как и содержимое их блоков .section.

Если нужно сделать, чтобы было красиво на всех разрешениях, лучше написать скрипт, который будет при загрузке страницы(или по какому-то другому событию, например по разрешению экрана) перебирать все нужные блоки (span с заголовком и .secton) и задавать им всем высоту, равную высоте самого высокого из блоков. Когда эти блоки встанут в одну колонку (на мобильниках), этот скрипт можно не включать.

Скрипт можно использовать, например, такой...

$.fn.equivalent = function (){
var $blocks = $(this),
    maxH    = $blocks.eq(0).height();

$blocks.each(function(){

    maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH;
});

$blocks.height(maxH);
}

$('.same-height-class').equivalent(); //Общий для блоков, у которых должна быть одинаковая высота, селектор.

То есть всем заголовкам нужно задать какой нибудь класс, и указать его здесь. Затем продублировать последнюю строку и указать в ней селектор для всех текстов под заголовками. И все должно выровняться.

5
  • Вы серьезно полагаете что данная проблема не решается на CSS и что запуск скрипта который будет перерисовывать DOM в цикле при загрузке страницы это хорошее решение? Просили передать привет от "оптимизации скорости загрузки". 11 ноя 2018 в 19:32
  • @Alexandr Tovmach Да, полагаю. Потому что с помощью CSS решается именно ДАННАЯ проблема. Вот только проблема эта к суровой реальности никакого отношения не имеет. Пока у нас lorem вместо текста. Но потом этот сайт обрастет контентом. Заголовки могут поменять, тексты поменяют точно. И всё выравнивание сдохнет ещё раз. А скрипт это довольно мелкий. И работает он с очень просто отрисовываемым свойством - высотой. Так что скорость загрузки особо не испортит.
    – Илья
    11 ноя 2018 в 22:21
  • Можно пример суровой реальности? Только такой чтобы я точно не смог решить с CSS. а насчет "мелкого скрипта" почитайте про recalculating style и про евенты которые его вызывают 11 ноя 2018 в 23:17
  • @Alexandr Tovmach. Пожалуйста. Оставляем этот же код, но слегка меняем вводные. И заголовки и тексты у нас теперь выводятся из админки. А вносит их туда либо менеджер проекта, либо сам заказчик. Задача: Сделать 4 блока в ряд, в каждом из которых содержится изображение, заголовок, текст и линия друг под другом. Изображения должны быть выровнены по верхам с изображениями, заголовки с заголовками, тексты с текстами, линии с линиями. Подвох в том, что у одного из блоков заголовок в 3 строчки, у другого в одну. +- то же самое с текстами. Блоки при адаптиве выстраиваются в колонку.
    – Илья
    12 ноя 2018 в 4:09
  • Дал себе вольность немного подправить CSS для Вашего решения, потому что Вы не предоставили, а без него не работает: codepen.io/alexandrtovmach/pen/vVRMrY . Так как это наша личная дискуссия то я не буду публиковать это как ответ и оставлю это в виде ссылки (простив правил stackoverflow) 12 ноя 2018 в 10:21

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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