HTML + CSS -взаимное изменение размеров div-ов. Как реализовать?

Некоторое время назад начал обучаться web-дизайну, в частности верстке сайтов. Но во время очередной верстки столкнулся с одной проблемой:
54c00536b5a848dbaca11a0f68a26585.png

Эти два блока должны быть, во-первых, одной высоты, во-вторых, вертикальный размер блоков должен взаимно изменяться, когда парный блок становится больше другого. Иначе говоря, если увеличить кол-во текста в блоке так, что по размерам он станет больше парного, то размер этот парный блок должен стать того же размера, что и переполненный. И выглядеть это должно примерно так:
fc4923489e9e4f6cb0ab56695f1efdbc.png

Возможности строго ограничены ресурсом, на котором сверстанное "чудо" будет блистать (одна из энциклопедий wikia):
  • HTML (неполный - только основное форматирование, блоки div и собственные wikia-вские теги. таблицы есть, при чем к ним можно применять стили, но кодить их - весьма муторное дело)
  • СSS (чистый)
  • JS (но кол-во скриптов, которые можно добавить, ограниченно. как же могут возникнуть проблемы с повсеместным использованием)
  • Возможности загружать сторонние файлы (помимо изображений и видео) нет
Вообщем, картина не радует(

Вот код:
HTML
<div class="info">
            
            <div class="statement" align="center" style="float: left">
                <div class="text"> Места спавна </div>
            </div>
            
            <div class="statement" align="center" style="float: right">
                <div class="text"> Военные локации </div>
            </div>
        
            <div class="clr"></div>
                </div>


CSS
.info{
    min-height: 30px;
    width:250px; 
}

.info .statement{
    width: 110px;
    min-height: 100%;
}


И, собственно, сам вопрос - как это можно реализовать?

P.S. Код и скриншот - только часть всего пирога. Конечная верстка представляет из себя инфобокс. Если появится необходимость лицезреть все чудо целиком (включая код), могу это устроить)

P.P.S. Понимаю, что верстка убога, но занимаюсь этим не так уж и много времени.
  • Вопрос задан
  • 2528 просмотров
Решения вопроса 2
Lisonok
@Lisonok
<div class="info">
            <div class="statement">
                <div class="text"> Места спавна </div>
            </div>
            <div class="statement">
                <div class="text"> Военные локации </div>
            </div>
</div>

.info{
    min-height: 30px;
    display: table;
    width: 100%;
}

.info .statement{
    text-align: center;
    vertical-align: middle;
}
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
1) Используем таблицу
2) Flex-box
3) Min-Height
4) Js (перебераем массив элементов и ищем самый высокий. После добавляем эту высоту всем)

Что выбирать из этого, решать вам!
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
.info .statement .text {
min-height:100%;
}
Ответ написан
Если Вам нужно использовать равные блоки, используйте table
<table class="info">
      <tr>
            <td class="statement" >
                Места спавна
            </td>          
            <td class="statement">
                 Военные локации
            </td>

table {
  ..
}
table tr {
    min-height: 100px;
}
table tr td{
    vertical-align: middle;
}

Большая часть хороших верстальщиков используют таблицы для получения ровных блоков, да и изменению лучше поддаются, без float: left: display: inline;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы