3

Есть три блока на сайте одинаковой высоты, расположенные в одну строку. Левый (1) привязан к левой стороне браузера, а средний (2) и правый (3) к правой стороне браузера.

дано
(источник: joxi.ru)

Задача: нужно, чтобы средний блок (2) всегда был посередине, относительно других блоков, чтобы расстояние между 1-2 и 2-3 были одинковыми. Как это реализовать?

Вот пример того, что мне нужно. Теперь расстояния А и Б одинаковы всегда при изменении окна браузера:

требуется
(источник: joxi.ru)

2
  • Ширина 1 и 2 блоков фиксирована? 13 сен 2016 в 15:52
  • Она не задана в пикселях, но, т.к. для всех 3-ёх блоков используется параметр в CSS display: inline-block, то блок заканчивается, тогда, когда заканчивается текст в нем. Но, повторюсь, размер не задан в пикселях. 13 сен 2016 в 15:55

5 ответов 5

5

Вот так, например https://jsfiddle.net/1d6L6hhk/

.left {
  float:left;
  height: 30px;
  background: red;
}

.right {
  float: right;
  height: 30px;
  background: green;
}

.center {
  display: inline-block;
  overflow: hidden;
  height: 30px;
  background: blue;
}

.wrapper {
  text-align: center;
}
<div class="wrapper">
    <div class="left">Два  слова, хотя нет, пусть будет длинный текст</div>
    <div class="center">центральный блок</div>
    <div class="right">Три случайных слова</div>
</div>

1
  • Вот этот пример сработал. Большое спасибо! 13 сен 2016 в 16:54
4

Как один из вариантов flex:

header {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    flex-flow:  row nowrap;
}
<header>
  <div class="logo">Logo</div>
  
  <div class="center">Center</div>

   <div class="call">Звонок</div>
</header>

9
  • Елена, попробовал воспользоваться вашим кодом. Если сделать точь-в-точь, то элементы будут просто в столбик. Если же добавить к каждому элементу display: inline-block. То просто в строку. 13 сен 2016 в 16:02
  • @Максим, исправила ответ. Добавьте flex-flow: row nowrap;
    – SVE
    13 сен 2016 в 16:04
  • Мне бы что-нибудь более кросс-браузерное :) "Правильней всего они отображаются в Chrome. В Firefox работают частично, в Safari — вообще не работают." 13 сен 2016 в 16:04
  • Приведите код или ссылку на верстку. Трудно догадаться в чем проблема.
    – SVE
    13 сен 2016 в 16:06
  • пример кода: joxi.ru/82QV7OBf1QRZ8A 13 сен 2016 в 16:09
2

section {
  text-align: justify;
  background: silver;
  height: 2em;
}

section::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 0;
}

div {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  background: antiquewhite;
}
<section>
  <div>I'm the left block</div>
  <div>Block in between</div>
  <div>Right one</div><!-- no space --></section>

1

Для коллекции, на Grid'ах

.head {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-gap: auto;
  justify-content: space-between;
  width: 100%;
}

.head > div {
  display: block;
  width: 100%;
  background: red;
  padding: 10px;
  box-sizing: border-box;
}
<div class="head">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

0

section { background: silver; height: 2em; line-height: 2em; }

div { height: 100%; }

.left { float: left; }
.right { float: right; }
.middle { overflow: hidden; text-align: center; }

.middle div { display: inline-block; vertical-align: top; }

.left, .right, .middle div { background: antiquewhite; }
<section>
  <div class=left>I'm the left block</div>
  <div class=right>Right one</div>
  <div class=middle><div>Block in between</div></div>
</section>

Ваш ответ

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

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