динамически сделайте два плавающих раздела одинаковой высоты

#html #css #css-float

#HTML #css #css-float

Вопрос:

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

введите описание изображения здесь

Я не могу понять, как это сделать с помощью CSS (надеюсь, при сохранении простоты моей разметки)

пример html

 <div class="wrapper">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

пример css

 .wrapper {
    display: inline-block;
    margin: 10px 0;
}
.left {
    float: left;
    width: 60px;
    background-color: #999;   
}
.right {
    float: left;
    width: 540px;
    border: 4px solid #666;
    padding: 8px;
}

или посмотрите, что я имею в виду здесь

Ответ №1:

Это своего рода распространенная проблема. Дело в том, что вам нужен либо трюк с CSS / фоновым изображением, либо использование javascript. Часто используются искусственные столбцы.

Ответ №2:

Да, вам нужно полагаться на JavaScript для решения такого рода проблем, вы могли бы просто всегда устанавливать минимальную высоту левого столбца в соответствии с высотой правого столбца или что-то подобное этому!

Используя jQuery, это может помочь вам начать! http://www.cssnewbie.com/equal-height-columns-with-jquery /