0

Не могу понять как сверстать данный макет. Так чтобы я мог поставить левым блокам фоновый цвет и изображение и при этом чтобы содержимое блоков было по направляющим.. Верстка планируется быть адаптивной.

Какая должна быть правильная структура и подход?

Блок который нужно сверстать

Я пробовал делать с помощью bootstrap.

<div class="container">
  <div class="row">
    <div class="col-lg-6 left">
      <div class="first">Первый левый блок</div>
      <div class="red">Красный левый блок</div>
    </div>
    <div class="col-lg-6 right">Правый блок</div>
  </div>
</div>

Проблема в том, что сейчас блоки с классами left и right ограничены шириной .container. Поэтому не будут на всю ширину.

А если я буду делать так:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 left">
      <div class="first">Первый левый блок</div>
      <div class="red">Красный левый блок</div>
    </div>
    <div class="col-lg-6 right">Правый блок</div>
  </div>
</div>

то я смогу сделать им фоновый цвет, но контент не попадет в размер контейнера (по ширине направляющих).

6
  • На ru.so решаются конкретные проблемы, связанные с программированием, а не написание кода за автора. Покажите как Вы сами пытались сверстать страницу и что именно вызывало у Вас проблему(включите Ваш код в текст вопроса).
    – Alex
    15 мая 2016 в 18:06
  • На самом деле интересная задачка. Чего отмазались то сразу
    – user31906
    15 мая 2016 в 18:11
  • да, покажите как это делаете вы и почему вам это не подходит.
    – toxxxa
    15 мая 2016 в 18:19
  • @mJeevas ну почему же отмазались? когда что-то не получается в верстке, должно быть хоть что-то, а здесь нет ничего и это не есть хорошо.
    – Alex
    15 мая 2016 в 18:21
  • не надо притягивать за уши bootstrap туда, где он совсем не лезет, верстайте с нуля и всё получится
    – MasterAlex
    15 мая 2016 в 18:49

3 ответа 3

0

В приведённом вами коде я вижу сразу ошибку: вы пользуетесь bootstrap-сеткой для левой и правой колонок, но забываете про ячейки в этих колонках.

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 left">
      <div class="col-lg-12 first">Первый левый блок</div>
      <div class="col-lg-12 red">Красный левый блок</div>
    </div>
    <div class="col-lg-6 right">Правый блок</div>
  </div>
</div>

в зависимости от требуемого поведения, можно сделать еще и так:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 pull-right right">Правый блок</div>
    <div class="col-lg-6 first">Первый левый блок</div>
    <div class="col-lg-6 red">Красный левый блок</div>
  </div>
</div>

Кроме того, если уж пользоваться бутстрапом, то и вместо выставления margin-left, margin-right для выравнивания по направляющим я бы пользовался col-*-offset, чтобы через классы добавить разные поведения на разные ширины сетки:

<div class="col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 col-sm-6">
    Первый левый блок
</div>
0

Если без бутстрепа то можно так попробовать:

.left {
  width: 50%;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Для Firefox */ 
  text-align: right;
  }

.right {
  width: 50%;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Для Firefox */ 
  text-align: left;
  }

.left-gray {
  background-color: rgb(195,195,195);
  }

.left-gray-content {
  width: 200px;
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  }

.left-gray-content p {
  padding-top: 200px;
  padding-bottom: 200px;
  }


.left-red {
  background-color: rgb(215,0,0);
  }

.left-red-content {
  width: 200px;
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  }

.left-red-content p {
  padding-top: 20px;
  padding-bottom: 20px;
  }

.right-content {
  width: 200px;
  margin-left: 10px;
  display: inline-block;
  text-align: left;
  }

.right-content p {
  padding-top: 30px;
  padding-bottom: 30px;
  }
<div class="left">
  <div class="left-gray">
    <div class="left-gray-content">
    <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
    </div>
  <div class="left-red">
    <div class="left-red-content">
    <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
</div>
  </div>

<div class="right">
<div class="right-content">
  <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p>
  <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p>
  <p>Amet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod temporAmet conse ctetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
</div>

0

При помощи CSS.просто с лева блок 50% в высоту и 50 в ширину, еще так само 1 блок, и справа так в высоту 100 и ширену 50% и позиционирование поставить нужно и все...

2
  • хотя слева нижний блок высотой меньше чем 50%. 20 например или 25, а верхний все остальное.
    – darkwoolf
    15 мая 2016 в 19:38
  • это больше комментарий нежели ответ. приведите пример кода по Вашем словам.
    – Alex
    16 мая 2016 в 6:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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