1

введите сюда описание изображения

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

2 ответа 2

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>

0

Вы хотите писать вручную или допустимо использование фреймворков? Если допустимо - 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>
Лично мое мнение - использовать фреймворк - хорошо. Сразу решаются вопросы базовой адаптивности и есть набор полезных классов для верстки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.