У меня есть основной div обертки, который установлен на 100% ширины. Внутри этого я хотел бы иметь два div, один с фиксированной шириной и другой, который заполняет остальное пространство. Как мне переместить второй div, чтобы заполнить остальное пространство. Спасибо за любую помощь.
241
Ответы:
Есть много способов сделать то, что вы просите:
Использование свойства CSS
float
:Использование свойства CSS
display
- которое можно использовать, чтобы заставитьdiv
s действовать какtable
:Есть больше методов, но эти два являются самыми популярными.
источник
CSS3 представил гибкие боксы (также как flex box), которые также могут достичь этого поведения.
Просто определите ширину первого div, а затем присвойте второму
flex-grow
значение,1
которое позволит ему заполнить оставшуюся ширину родителя.демоверсия jsFiddle
Обратите внимание, что flex-боксы не имеют обратной совместимости со старыми браузерами, но являются отличным вариантом для таргетинга на современные браузеры (см. Также Caniuse и MDN ). На CSS Tricks доступно отличное всестороннее руководство по использованию flex box .
источник
Я не очень разбираюсь в стратегиях разработки HTML и CSS, но если вы ищете что-то простое, и оно будет умещаться на экране автоматически (как и я), я считаю, что самое простое решение - заставить div вести себя как слова в параграф. Попробуйте указать
display: inline-block
Вы можете или не должны указывать ширину DIV
источник
display:flex
это лучшее решение, но я думаю, чтоinline-block
оно также отлично, потому что оно работает на большем количестве браузеров. Кстати, вам может понадобиться обернуть оба элемента div,<div style="white-space:nowrap">
чтобы не допустить изменения размера.inline-block
код.Для этого вы можете использовать CSS-сетку, это длинная версия для иллюстрации:
Или более традиционный метод с использованием float и margin.
В этом примере я включил цвет фона, чтобы показать, где что находится, а также что делать с контентом под плавающей областью.
Не вставляйте свои стили в реальную жизнь, извлеките их в таблицу стилей.
источник
Дайте первому элементу div поплавок влево и зафиксируйте его, второму div на 100% ширину влево. Это должно делать свое дело. Если вы хотите разместить предметы под ним, вам нужно ясно: оба на предмет, который вы хотите разместить ниже
источник
Это будет совместимо с разными браузерами. Без оставленного поля вы столкнетесь с проблемами, связанными с тем, что контент работает полностью влево, если ваш контент длиннее боковой панели.
источник
Если вы не изменяете IE6, затем поместите вторую
<div>
и поместите ее в поле, равное (или, возможно, немного большее)<div>
фиксированной ширины первой .HTML:
CSS:
Маржа учитывает возможность того, что в «остальном пространстве»
<div>
может содержаться больше контента, чем в «фиксированной ширине»<div>
.Не задавайте фиксированную ширину фона; если вам нужно визуально увидеть их как разные «столбцы», используйте трюк с искусственными столбцами .
источник