Как сделать такую раскладку используя Bootstrap или float? (скрины и заготовки в песочнице внутри)

224

15 апреля 2018, 21:29

Цель - вот такая раскладка

Пока получается реализовать только вот так:

Заготовка jsbin c float
Заготовка jsbin c Bootstrap

Можно передвинуть блок 3 вверх - через postion: relative. Но появиться ненужное пустое пространство внизу.

Сделать обертки-колонки для блоков 1,3 и 2,4 нет возможности.

Какие можно поднять блок 3 и не добавлять пустое пространство внизу? (песочницы с кодом для эксперементов - см. выше)

Answer 1

С float всё просто : достаточно вашему блоку поставить отрицательный margin-top

.block1 { 
  background-color: orange; 
  height: 200px; 
  float: left; 
  width: 50%; 
} 
 
.block2 { 
  background-color: yellow; 
  height: 300px; 
  float: left; 
  width: 50%; 
  color: black; 
} 
 
.block3 { 
  background-color: blue; 
  height: 200px; 
  float: left; 
  width: 50%; 
  color: white; 
  margin-top: -100px; 
} 
 
.block4 { 
  background-color: black; 
  height: 100px; 
  float: left; 
  width: 50%; 
  color: white; 
}

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
</head> 
 
<body> 
 
  <div class="block1">1</div> 
 
  <div class="block2">2</div> 
 
  <div class="block3">3</div> 
 
  <div class="block4">4</div> 
 
  <div class="block1">1</div> 
 
  <div class="block2">2</div> 
 
  <div class="block3">3</div> 
 
  <div class="block4">4</div> 
 
</body> 
 
</html>

А вот bootsrap не занимаюсь но скажу что для этих целей идеально подходит grid

Answer 2

Если колонок только две, то достаточно второму блоку дать float: right;.

Соответственно, в третьем Бутстрапе для этого предусмотрен класс pull-right:

.block1{ 
  background-color: orange; 
  height: 200px; 
} 
.block2{ 
  background-color: yellow; 
  height: 300px; 
} 
.block3{ 
  background-color: blue; 
  height: 200px; 
} 
.block4{ 
  background-color: black; 
  height: 100px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container"> 
  <div class="row"> 
    <div class="col-xs-8"> 
      <div class="block1">1</div> 
    </div> 
    <div class="col-xs-4 pull-right"> 
      <div class="block2">2</div> 
    </div> 
    <div class="col-xs-8"> 
      <div class="block3">3</div> 
    </div> 
    <div class="col-xs-4"> 
      <div class="block4">4</div> 
    </div> 
  </div> 
</div>