Одинаковая высота дивов

@nonamez123 · Регистрация: 23.10.2010

Author24 — интернет-сервис помощи студентам

Собственно как сделать высоту лево дива такой же как и у правого (красные дивы).

CSS

.content-block{
    display: inline-block;
    border:1px solid red; 
    white-space: normal; 
    width: 340px; 
    padding: 5px;
    text-align: center;
}
 
.blocks{
    display:inline-block;
    margin: 5px 0;
}
.up{
    border: 1px solid green;
    padding: 5px;
    margin-bottom: 5px;
    width: 70px;
}
.down{
    border: 1px solid black;
    padding: 5px;
}

HTML5

<div>
            <div class="content-block">1</div>
            <div class="content-block">
                <div style="display:inline-block">
                    <div class="up">up</div>
                    <div class="down">down</div>
                </div>
                <div style="display:inline-block">
                    <div class="up">up</div>
                    <div class="down">down</div>
                </div>
                <div style="display:inline-block">
                    <div class="up">up</div>
                    <div class="down">down</div>
                </div>
                <div style="display:inline-block">
                    <div class="up">up</div>
                    <div class="down">down</div>
                </div>
            </div>
        </div>

@Taatshi · 07.01.2013, 20:57

Если высота дивов заранее неизвестна и не фиксированна - то только с помощью Javascript. C помощью css можно только сэмулировать одинаковую высоту визуально.

@eiwiking · 07.01.2013, 21:09

Извините за этот бред, но вот мой вариант =)

html

HTML5

<div class="main">
<div>
<div class="content-block">
<div class="new"></div>
</div>
<div class="content-block">
<div style="display:inline-block">
<div class="up">up</div>
<div class="down">down</div>
</div>
<div style="display:inline-block">
<div class="up">up</div>
<div class="down">down</div>
</div>
<div style="display:inline-block">
<div class="up">up</div>
<div class="down">down</div>
</div>
<div style="display:inline-block">
<div class="up">up</div>
<div class="down">down</div>
</div>
</div>
</div>
</div>

css

CSS

.new {
    border: 1px solid red;
    padding: 1px;
    height: 66px;
}
 
.content-block{
    float: left;
    height: 70px;
    display: inline-block;
    border:1px solid pink; 
    white-space: normal; 
    width: 340px; 
    padding: 5px;
    text-align: center;
}
 
.blocks{
    display:inline-block;
    margin: 5px 0;
}
.up{
    border: 1px solid green;
    padding: 5px;
    margin-bottom: 5px;
    width: 70px;
}
.down{
    border: 1px solid black;
    padding: 5px;
}

<div class="main"> лишний.

@nonamez123 · 07.01.2013, 21:12 **[ТС]**

Сообщение от Taatshi

Если высота дивов заранее неизвестна и не фиксированна - то только с помощью Javascript. C помощью css можно только сэмулировать одинаковую высоту визуально.

ну я пытался задать height - но он первому начинает считать с середины, а второму норм и получается что первый уходит процентов на 50 в низ.

@Taatshi · 07.01.2013, 21:57

Сообщение от nonamez123

он первому начинает считать с середины

эмм... посмотреть бы. Где-то что-то не так прописали по-видимому. При явно указанной высоте вообще проблем не должно быть.

@nonamez123 · 07.01.2013, 22:00 **[ТС]**

Сообщение от Taatshi

эмм... посмотреть бы. Где-то что-то не так прописали по-видимому. При явно указанной высоте вообще проблем не должно быть.

Добавил 100px в .content-block

@Taatshi · 07.01.2013, 22:19

Поскольку у вас прописано выравнивание inline-block, див ведет себя как блочный элемент. Добавьте для content-block

CSS

1	vertical-align: top;

Но логически правильнее было бы на мой взгляд вместо inline-block использовать float

для content-block

CSS

1	float: left

@nonamez123 · 07.01.2013, 22:21 **[ТС]**

При флоуте марджин себя по другому ведет, по этому использую инлайн-блок

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	07.01.2013, 20:57	2
	Если высота дивов заранее неизвестна и не фиксированна - то только с помощью Javascript. C помощью css можно только сэмулировать одинаковую высоту визуально. 0

@nonamez123 189 / 185 / 54 Регистрация: 23.10.2010 Сообщений: 1,336
	07.01.2013, 21:12 [ТС]	4
	Сообщение от Taatshi Если высота дивов заранее неизвестна и не фиксированна - то только с помощью Javascript. C помощью css можно только сэмулировать одинаковую высоту визуально. ну я пытался задать height - но он первому начинает считать с середины, а второму норм и получается что первый уходит процентов на 50 в низ. 0

@Taatshi Администратор 12268 / 5333 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	07.01.2013, 21:57	5
	Сообщение от nonamez123 он первому начинает считать с середины эмм... посмотреть бы. Где-то что-то не так прописали по-видимому. При явно указанной высоте вообще проблем не должно быть. 0

@nonamez123 189 / 185 / 54 Регистрация: 23.10.2010 Сообщений: 1,336
	07.01.2013, 22:00 [ТС]	6
	Сообщение от Taatshi эмм... посмотреть бы. Где-то что-то не так прописали по-видимому. При явно указанной высоте вообще проблем не должно быть. Добавил 100px в .content-block 0

@nonamez123 189 / 185 / 54 Регистрация: 23.10.2010 Сообщений: 1,336
	07.01.2013, 22:21 [ТС]	8
	При флоуте марджин себя по другому ведет, по этому использую инлайн-блок 0

Опции темы