2 коробки одинаковой высоты (в процентах)

Question

Как создать две коробки (плавающие рядом) одинаковой высоты.Я хочу создать ящики высотой 40% контейнера / окна?

Answer 1

См. Пример здесь

---

Если это то, что вы ищете, вот еще:

CSS:

  #parent{
    width:205px;
    height:200px;
    border:1px solid #000000;
    overflow:auto;
  }

  #child1{
    height:40%;
    background:#00ff00;
    float:left;
  }

  #child2{
    height:40%;
    background:#0000ff;
    float:left;
  }  

Важные моменты:

• float:left используется для выравнивания двух боксов рядом
• height указано в % для обоих дочерних блоков, чтобы они наследовали от своего родителя.

HTML:

  <div id="parent">
    <div id="child1">
        This is first box
    </div>
    <div id="child2">
        This is second box
    </div>
  </div>

Answer 2

Это должно быть простым решением для вас. Вот мой пример:

jsfiddle

HTML:

<div class="wrap">
    <div class="left">
        Content
    </div>
    <div class="right">
        More content
    </div>
</div>

CSS:

.wrap
{
    width: 400px;
    height: 500px;
    border: 1px solid #000;
}

.left, .right
{
    float: left;
    width: 45%;a
    height: 40%;
    margin: 2%;
}

.left
{
    border: 1px solid #f00;
}

.right
{
    border: 1px solid #00f;
}
​

Answer 3

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

.wrapper {
    width: 400px;
    height: 400px;
    outline: 1px solid #000;
}
.wrapper div {
    display: inline-block;
    width: 198px;
    height: 40%;
    background: #66c;
}
.wrapper div:first-child {
    background: #6c6;
}

<div class="wrapper">
    <div>This is the first box</div>
    <div>This is the second box</div>
    <p>Some other content</p>
</div>

В настоящее время он не работает в WebKit, но я предполагаю, что это ошибка, и будет обходной путь, который я исследую. Если вам нужно, чтобы он работал в IE <8, добавьте условный комментарий: </p>

<!--[if lt IE 8]>
<style>
    .wrapper div { zoom:1; *display:inline;}
</style>
<![endif]-->

Answer 4

Использование% в качестве высоты относительно высоты вашего родительского контейнера. Поэтому вам нужно объявить высоту вашего родительского контейнера. Взгляните на этот урок: Столбцы равной высоты .