Я пытаюсь добиться этого, используя только поплавки:CSS столбцов, стеки на изменении размера, используя только поплавки
|A******* B******************|
|*300px * * auto *|
|* * * *|
|******** *******************|
|A******* |
|*300px * |
|* * |
|******** |
|B************|
|* auto *|
|* *|
|*************|
Блок Б должен взять оставшееся пространство и идти под блок А, когда она меньше 500px
свободного пространства для этого. Я пробовал много комбинаций, отрицательные margin
решений, но все без успеха.
Проблема в том, что css-поплавки могут спускаться (стекать), когда нет свободного места, но только если указан width
. Когда width
не указан, блок занимает оставшееся пространство (и это то, что мне нужно), но не может складываться. И мне нужно и функции для блока B: взятие оставшегося пространства и переход под A на меньшие экраны.
Что вы предлагаете для этого без медиа-запросов и других функций, не поддерживаемых в старых браузерах (IE8 + и без JS)?
Начальная точка:
<div id="blockA">
blockA
</div>
<div id="blockB">
<p>blockB</p>
<p id="stopper">stopper</p>
</div>
#blockA {
border: 1px solid powderblue;
width: 300px;
float: left;
}
#blockB {
border: 1px solid khaki;
margin-left: 300px;
}
#blockB > p#stopper {
width: 500px;
border: 1px solid blue;
}
См решение ниже.
Что не происходит? 'B' не плавает под' A' или что? Почему бы вам не использовать некоторую инфраструктуру, например, Bootstrap? – TheVillageIdiot
@TheVillageIdiot B не плавает под A. Я не использую bootstrap, потому что хочу сделать это сам по-своему. И я также подозреваю, что bootstrap просто использует медиа-запросы. –
Можете ли вы показать нам CSS и HTML, которые вы используете? Также, если вы используете 'auto' для' B', он может быть установлен в оставшемся пространстве. Также, какие старые браузеры вы говорите о 'IE6'? – TheVillageIdiot