Выравнивание колонок

181

27 ноября 2018, 11:30

Не могу выровнять средний столбец. Пробовал флексами и space-between - криво выходит. Флотами тоже не получается . Надо чтобы левый и правый столбец были выравнены по краям контейнера. А средний был чётко в центре.

.items ul:nth-child(1) { 
  float: left; 
} 
 
.items ul:nth-child(2) { 
  float: right; 
} 
 
.items ul:nth-child(3) { 
  float: none; 
  width: 200px; 
  margin: 0 auto; 
}

<div class="items cfix"> 
  <ul> 
    <li> 
      <div class="item1"></div><span>Оформление<br>документов</span></li> 
    <li> 
      <div class="item2"></div><span>Бальзамирование</span></li> 
    <li> 
      <div class="item3"></div><span>Катафалк</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item4"></div><span>Бригада</span></li> 
    <li> 
      <div class="item5"></div><span>Копка</span></li> 
    <li> 
      <div class="item6"></div><span>Отпевание<br>в церкви</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item7"></div><span>Поминальный<br>обряд</span></li> 
    <li> 
      <div class="item8"></div><span>Кремация</span></li> 
    <li> 
      <div class="item9"></div><span>Груз 200</span></li> 
  </ul> 
</div>

Answer 1

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  width: 100%; 
  height: 100%; 
  background: orange; 
} 
 
.items * { 
  margin: 5px; 
} 
 
.items { 
  background: blue; 
  width: 100%; 
} 
 
ul { 
  background: red; 
  display: flex; 
  justify-content: space-between; 
} 
 
li { 
  width: 30%; 
  background: green; 
  display: flex; 
  justify-content: space-between; 
} 
 
span { 
  background: gray; 
  text-align: right; 
} 
 
div { 
  background: brown; 
}

<div class="items cfix"> 
  <ul> 
    <li> 
      <div class="item1">Foto</div><span>Оформление документов</span></li> 
    <li> 
      <div class="item2">Foto</div><span>Бальзамирование</span></li> 
    <li> 
      <div class="item3">Foto</div><span>Катафалк</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item4">Foto</div><span>Бригада</span></li> 
    <li> 
      <div class="item5">Foto</div><span>Копка</span></li> 
    <li> 
      <div class="item6">Foto</div><span>Отпеваниев церкви</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item7">Foto</div><span>Поминальный обряд</span></li> 
    <li> 
      <div class="item8">Foto</div><span>Кремация</span></li> 
    <li> 
      <div class="item9">Foto</div><span>Груз 200</span></li> 
  </ul> 
</div>

Answer 2

Попробовал сделать выравнивание с помощью flexbox. По-моему, все ровно, посмотрите сами. https://codepen.io/dimkadenisov/pen/LJbEMX

.items { 
  display: flex; 
  justify-content: space-between; 
} 
 
ul { 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
}

<div class="items cfix"> 
  <ul> 
    <li> 
      <div class="item1"></div>             <span>Оформление<br>документов</span></li> 
    <li> 
      <div class="item2"></div><span>Бальзамирование</span></li> 
    <li> 
      <div class="item3"></div><span>Катафалк</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item4"></div><span>Бригада</span></li> 
    <li> 
      <div class="item5"></div><span>Копка</span></li> 
    <li> 
      <div class="item6"></div><span>Отпевание<br>в церкви</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item7"></div><span>Поминальный<br>обряд</span></li> 
    <li> 
      <div class="item8"></div><span>Кремация</span></li> 
    <li> 
      <div class="item9"></div><span>Груз 200</span></li> 
  </ul> 
</div>

Answer 3

Ещё вариант при помощи display: grid;

.items { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 10%; 
} 
 
.items ul { 
  display: block; 
  width: 100%; 
  padding: 0; 
} 
 
.items ul li { 
  list-style: none; 
}

<div class="items cfix"> 
  <ul> 
    <li> 
      <div class="item1"></div><span>Оформление<br>документов</span></li> 
    <li> 
      <div class="item2"></div><span>Бальзамирование</span></li> 
    <li> 
      <div class="item3"></div><span>Катафалк</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item4"></div><span>Бригада</span></li> 
    <li> 
      <div class="item5"></div><span>Копка</span></li> 
    <li> 
      <div class="item6"></div><span>Отпевание<br>в церкви</span></li> 
  </ul> 
  <ul> 
    <li> 
      <div class="item7"></div><span>Поминальный<br>обряд</span></li> 
    <li> 
      <div class="item8"></div><span>Кремация</span></li> 
    <li> 
      <div class="item9"></div><span>Груз 200</span></li> 
  </ul> 
</div>

Answer 4

Пробежался по ответам... и перечитал вопрос... flex, grid, float...

А что, просто position для таких задач уже не в моде? Работает же! Добавлю вариант:

.items { 
  position: relative; 
} 
 
.items ul { 
  position: absolute; 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
} 
.items ul:nth-child(2) { 
  left: 50%; 
  transform: translateX(-50%); 
} 
.items ul:nth-child(3) { 
  right: 0; 
} 
 
.items img { 
  height: 50px; 
  width: 50px; 
  margin: 10px 10px 10px 0px; 
  vertical-align: middle; 
} 
.items span { 
  display: inline-block; 
  vertical-align: middle; 
}

<div class="items cfix"> 
  <ul> 
    <li><div class="item1"></div><img src=""><span>Оформление<br>документов</span></li> 
    <li><div class="item2"></div><img src=""><span>Бальзамирование</span></li> 
    <li><div class="item3"></div><img src=""><span>Катафалк</span></li> 
  </ul> 
  <ul> 
    <li><div class="item4"></div><img src=""><span>Бригада</span></li> 
    <li><div class="item5"></div><img src=""><span>Копка</span></li> 
    <li><div class="item6"></div><img src=""><span>Отпевание<br>в церкви</span></li> 
  </ul> 
  <ul> 
    <li><div class="item7"></div><img src=""><span>Поминальный<br>обряд</span></li> 
    <li><div class="item8"></div><img src=""><span>Кремация</span></li> 
    <li><div class="item9"></div><img src=""><span>Груз 200</span></li> 
  </ul> 
</div>