Я пытаюсь создать HTML-макет с фундаментом. Мой код выглядит следующим образом:

<div class="row" data-equalizer>

      <div class="medium-3 columns" data-equalizer-watch>
      <div class="callout" data-equalizer-watch>
<h2>Locations</h2>
</div>
</div>
 <div class="medium-9 columns" data-equalizer-watch>
 <div class="callout" data-equalizer-watch>

     <div class="row  relationship-model">
     <div class="medium-12 columns" >
     <div class="callout">
     <h2>Categories</h2>
      </div>
     </div>
          </div>
 <div class="row  relationship-model">
      <div class="medium-12 columns">
       <div class="callout">
     <h2>Location Current Request</h2>
     </div>
      </div>
            </div>


 </div>
 </div>
</div>

Вывод вышеуказанного HTML, как показано ниже: введите описание изображения здесь

Пока я хочу это, как показано ниже: введите описание изображения здесь

Я хочу, чтобы столбцы с левой или правой стороны были одинаковой высоты. Я могу сделать это со столом, но мне нужна такая же высота и отзывчивость.

0
user2739418 20 Апр 2016 в 13:44

3 ответа

Лучший ответ

Вы можете сделать это с помощью Flexbox

.content {
  display: flex;
  color: red;
}
.left,
.box {
  border: 1px solid #C3C3C3;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 4;
}
.left {
  flex: 1;
}
<div class="content">
  <div class="left">Lorem</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>
1
Nenad Vracar 20 Апр 2016 в 10:54

Попробуй это.

<div class="row" data-equalizer="foo">

  <div class="medium-3 columns">
    <div class="callout panel" data-equalizer-watch="foo">
      <h2>Locations</h2>
    </div>
  </div>

  <div class="medium-9 columns">
    <div class="panel" data-equalizer-watch="foo">
      <div class="row" data-equalizer="bar">
        <div class="callout panel" data-equalizer-watch="bar">
          <h2>Categories</h2>
        </div>
        <div class="callout panel" data-equalizer-watch="bar" style="margin-bottom:0">
          <h2>Location Current Request</h2>
        </div>
      </div>
    </div>
  </div>

</div>
0
Anoop John 20 Апр 2016 в 11:10

display: flex - один из лучших вариантов. Обратите внимание на совместимость браузеров, особенно в отношении поддержки Android flex только в Andriod Browser 4.3 .

Ссылка http://caniuse.com/#search=flex

.content {
  display: flex;
  color: red;
}
.left {
  width: 100px;
}
.box {
  border: 1px solid tomato;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 1;
}
<div class="content">
  <div class="left box">Lorem</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>

Обновленный ответ

.content {
  display: flex;
  color: red;
}
.left {
  width: 100px;
  align-self: baseline;
}
.box {
  border: 1px solid tomato;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 1;
}
<div class="content">
  <div class="left box">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>

Обновленная демонстрация: http://plnkr.co/edit/dXSG8m6NrJGCYjJDf9ne?p=preview

0
Mo. 25 Апр 2016 в 13:19