Как лучше разместить блоки?

326

24 ноября 2016, 10:17

Хочу сверстать первый макет,вот только не знаю как сверстать данные блоки,чтобы это было максимально правильно. собирался взять в общий див. потом на 1 строчке 2 дива. Допустим 1 блоку ширину 33% второму 66% на 2 строчке 3 дива,навесить одинаковый класс на 3 строчке аналогично 1 и 4 строчка аналогично 2. зафлоатить это дело влево. Но мне кажется что это слишком кривой вариант,и есть куда удачнее

Answer 1

Например с float:

*{ 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
  width: 100%; 
  height: auto; 
} 
 
.row { 
  overflow: hidden; 
  height: 200px; 
} 
 
.col-13 {float:left; height: 100%; width: 33.3333%; background: lightblue;} 
.col-23 {float:left; height: 100%; width: 66.66666%;} 
 
.img-1 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.img-2 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.row  p { 
  display: table-cell; 
  height: 200px; 
  vertical-align: middle; 
  text-align: center; 
}

<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> 
<div class="col-23"> 
  <div class="img-1"></div> 
</div> 
</div> 
<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> 
</div> 
<div class="row"> 
<div class="col-23"> 
  <div class="img-2"></div> 
</div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
</div>

С flex:

*{ 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
  width: 100%; 
  height: auto; 
} 
 
.row { 
  overflow: hidden; 
  height: 200px; 
   
    display: flex; 
    flex-flow: row nowrap; 
    align-items: stretch; 
    align-content: stretch; 
    justify-content: space-between; 
   
} 
 
.col-13 {height: 100%; width: 33.3333%; background: lightblue;} 
.col-23 {height: 100%; width: 66.66666%;} 
 
.img-1 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.img-2 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.row  p { 
  display: table-cell; 
  height: 200px; 
  vertical-align: middle; 
  text-align: center; 
}

<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> 
<div class="col-23"> 
  <div class="img-1"></div> 
</div> 
</div> 
<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> 
</div> 
<div class="row"> 
<div class="col-23"> 
  <div class="img-2"></div> 
</div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
</div>

С table:

*{ 
  box-sizing: border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
  width: 100%; 
  height: auto; 
} 
 
.row { 
  overflow: hidden; 
  height: 200px; 
   
    display: table; 
    width: 100%; 
   
} 
 
.col-13 {display: table-cell; vertical-align: middle; height: 100%; width: 33.3333%; background: lightblue;} 
.col-23 {display: table-cell; vertical-align: middle; height: 100%; width: 66.66666%;} 
 
.img-1 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.img-2 { 
  height: 100%; 
  background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
.row  p {   
  display: table-cell;  
  vertical-align: middle; 
  height: 200px;   
  text-align: center; 
}

<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> 
<div class="col-23"> 
  <div class="img-1"></div> 
</div> 
</div> 
<div class="row"> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit.</p></div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> 
</div> 
<div class="row"> 
<div class="col-23"> 
  <div class="img-2"></div> 
</div> 
<div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> 
</div>

Answer 2

Вы хотите писать вручную или допустимо использование фреймворков? Если допустимо - Bootstrap grid system в помощь. В данной сеточной системе страница по умолчанию поделена на 12 колонок. То есть Ваши блоки 1/3 и 2/3 можно прописать так:

<!--РЯД--> 
<div class="row"> 
  <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> 
  <div class="col-lg-4"> 
     ... 
  </div> 
   <!--КОЛОНКА ЗАНИМАЮЩАЯ 2/3 СТРАНИЦЫ--> 
  <div class="col-lg-8"> 
     ... 
  </div> 
</div>

По аналогии строим блоки, занимающие 1/3 часть страницы:

<!--РЯД--> 
<div class="row"> 
  <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> 
  <div class="col-lg-4"> 
     ... 
  </div> 
   <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> 
  <div class="col-lg-4"> 
     ... 
  </div> 
  <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> 
  <div class="col-lg-4"> 
     ... 
  </div> 
</div>