Вопрос по css – Как установить одинаковую высоту div

2

Это моя ситуация

HTML

<div id="content">
    <div id="item1">
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
        <div class="empty">&nbsp;</div>
    </div>
    <div id="item2">
        <div class="empty">&nbsp;</div>
    </div>
</div>

CSS

.empty
{
    width: 100px;
    height: 100px;
    background-color: red;
}

#item1
{
    float: left;
    padding: 10px;
    background-color: green;
}

#item2
{
    float: left;
    padding: 10px;
    background-color: blue;
}

#content
{
    padding: 10px;
    background-color: pink;
    overflow: hidden;
}

Это выглядит чтоhttp://jsfiddle.net/59qEt/3/

Итак, мой вопрос: как я должен установить мои стили на # item2 имеет ту же высоту, что и # item1?

Любая помощь будет оценена.

Ответ можно найти по этой ссылке: / Stackoverflow.com вопросы / 10988381 / ... Shabbir Lakdawala
Вы можете найти ответ в этом стеке: / Stackoverflow.com вопросы / 10988381 / ... Shabbir Lakdawala

Ваш Ответ

5   ответов
-1

http: //jsfiddle.net/59qEt/20 Работает во всех браузерах

0

div каждыйdiv сpadding:10px; а в п.2 просто 1div вы можете сделать 2 вещи 1 в пункте 2 добавить 3div и вариант 2. применитьheight на позиции 2 и позиции 2 ребенок пуст

0

убрать item2 из css

<div id="item1">
    <div class="empty">&nbsp;</div>
    <div class="empty">&nbsp;</div>
    <div class="empty">&nbsp;</div>
</div>
<div id="item1">
    <div class="empty">&nbsp;</div>
</div>

`

0

Ты можешь попробовать что-то вроде этого:

#item2 > div {
    padding-bottom:200px;
}

Вот тебе скрипка:

http: //jsfiddle.net/59qEt/24

5

Вы можете использоватьdisplay: стол-клетки свойство для этого. и удалитьfloat:left напиши так:

#item1, #item2
{
    display:table-cell;
}

Проверь этоhttp: //jsfiddle.net/59qEt/5

Обратите внимание, это работает до IE8 и выше.

Хороший код? Вы проверяли это во всех браузерах? ShibinRagh
Это работает в любом браузере. sandeep
любая идея работать в 7? ShibinRagh

Похожие вопросы