Вопрос по css, html – CSS 2 div размер авто той же высоты

3

У меня есть вопрос в CSS:

Как я могу это сделать:

CSS Auto width

Когда зеленый div имеет (авто) высоту 500px для контента, красный получает то же самое.

И когда красный имеет (авто) высоту 700px для содержимого, зеленый получает то же самое.

Оба имеют какой-либо контент, тогда я использую авто высоту

Итак, как я могу сделать, зеленый имеет ту же ширину, что и красный и красный, но с другим содержанием, с "height: auto;"?

Это статья Мэтью Джеймса Тейлора, где он объясняет эту проблему и дает ответ. Я использовал его решение в нескольких своих проектах, и оно прекрасно работает. Нет JavaScript, нет взломов, чистый HTML и CSS.http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks Jakub Hromadík

Ваш Ответ

4   ответа
5

эта отличная статья, Затем проверьте скрипку:

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML
<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>
CSS
#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​
2

чтобы они столкнулись с родительским DIV, а затем изменил размер родительского.

Примерно так .... тогда используйте CSS для их форматирования

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

некоторые другие решения могут быть перечислены здесь http://www.ejeliot.com/blog/61

Error: User Rate Limit Exceeded Marcos
0

Better solution use both javascript and css.

http://codepen.io/micahgodbolt/pen/FgqLc

1

или, как ответ @Taeeril, правильно предложить использовать javascript для выравнивания высот.

Вот решение с использованием типов отображения таблицыhttp://jsfiddle.net/SebAshton/Pj7gy/

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