Как сделать равноудаленные inline блоки?

274
03 мая 2018, 05:52

БЕЗ ФЛЕКСБОКСА И ГРИДОВ, нужна бОльшая поддержка браузеров

3 inline блока шириной по 32% (если задавать чтобы было почти ровно 33%, один из блоков уже переходит на другую строку). Как сделать чтобы блоки были равноудалены друг от друга в пределах контейнера?

Answer 1

Как один из вариантов для ie8+

<div style="display:table;width:100%;">
    <div style="display:table-cell;vertical-align:middle;width:33.3%">контент</div>
    <div style="display:table-cell;vertical-align:middle;width:33.3%text-align:center">контент</div>
    <div style="display:table-cell;vertical-align:middle;width:33.3%text-align:right;">контент</div>
<div>
Answer 2

Можно через функцию calc(). CSS-переменные использованы чисто для иллюстрации, можно вставлять число, равное количеству колонок вручную.

:root { 
  --columns-count: 4; /* это число должно совпадать с количеством колонок */ 
} 
 
* { 
  box-sizing: border-box; 
} 
 
div { 
  padding: 1em; 
  display: inline-block; 
  width: calc(100% / var(--columns-count)); 
} 
 
div + div { 
  border-left: 1px solid; 
}
<div>1</div><div>2</div><div>3</div><div>4</div>

Answer 3

UPD. Свойство поддерживается ИЕ, но не поддерживается Сафари.

Воспользуйтесь свойством text-align-last. Оно похоже на text-align, но действует на последнюю строку текста. С его помощью можно растянуть по ширине текст, в котором одна единственная строка.

text-align-last: justify;

Строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

.justify-inline-blocks { 
  background: #ccc; 
  margin: 12px 0; 
  padding: 6px 9px; 
  text-align-last: justify; 
} 
.item { 
  background: #666; 
  color: #fff; 
  display: inline-block; 
  padding: 6px 9px; 
  vertical-align: top; 
}
<div class="justify-inline-blocks"> 
   <div class="item">item</div> 
</div> 
 
<div class="justify-inline-blocks"> 
   <div class="item">item</div> 
   <div class="item">item</div> 
</div> 
 
<div class="justify-inline-blocks"> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
</div> 
 
<div class="justify-inline-blocks"> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
</div> 
 
<div class="justify-inline-blocks"> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
   <div class="item">item</div> 
</div>

Answer 4

Три блока(display: inline-block) в ряд с шириной 33.3%.

.container { 
  width: 600px; 
  height: 250px; 
  font-size: 0; 
} 
.container__item { 
  width: 33.3%; 
  height: 100%; 
  display: inline-block; 
} 
.container__item-red { 
  background: red; 
} 
.container__item-blue { 
  background: lightblue; 
} 
.container__item-green { 
  background: green; 
}
<div class="container"> 
  <div class="container__item container__item-red"></div> 
  <div class="container__item container__item-blue"></div> 
  <div class="container__item container__item-green"></div> 
</div>

READ ALSO
Как я могу сделать div с irregular shapes с помощью css3 и html5?
HTML

Как я могу сделать div с irregular shapes с помощью css3 и html5?

Мне интересно, есть ли возможность построить div с нерегулярными фигурами, что-то,аналогичные картам (например, Гренландия, Европа, Африка)

 262
Создание вращающегося 3d-блока с помощью CSS transitions и Javascript
HTML

Создание вращающегося 3d-блока с помощью CSS transitions и Javascript

Я экспериментировал с CSS, пытаясь создать 3d box, в котором можно выбрать передний план фигуры с помощью javascriptОн просто меняет имя класса box divs и использует...

 238
Как поменять тему в Sublime Text 3?
HTML

Как поменять тему в Sublime Text 3?

Как поменять тему в Sublime Text 3 ? А то уже глаза кровью наливаются от розового текста HTML-документа :(

 212
2 обработчика для одной формы
HTML

2 обработчика для одной формы

Доброй ночи, есть форма от Яндекс кассы

 219