Блоки не встают в ряд

Рейтинг: 1Ответов: 1Опубликовано: 24.11.2014

Нужно разместить блоки div в ряд. Мой код:

<div class="alert alert-info" style="width: 100%">
  <div style="float:left; width: 48%">
    <center>Вы </center>
  </div>
  <div style="width: 4%">
    <div style="width: 1px; height: 100px; background-color: #97070B;"></div>
  </div>
  <div style="float:right; width: 48%">
    <center>Вы </center>
  </div>
</div>

Проблема в том, что в центре должен быть div типа вертикального hr.

css
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

Возможно, как-то так с использованием HTML и CSS.

Фиддл

.left {
  float: left;
  width: 48%;
  background: #ccc;
  width: 48%;
}
.right {
  float: right;
  width: 48%;
  background: #777
}
.hr {
  float: left;
  width: 1px;
  height: 100px;
  background-color: #97070B;
  margin-left: 2%;
}
<div class="alert alert-info" style="width: 100%">
  <div class="left">Вы 1</div>
  <div class="hr"></div>
  <div class="right">Вы 2</div>
</div>