Я хочу, чтобы два элемента в одной строке использовались float: left
для элемента слева.
У меня нет проблем в достижении этого в одиночку. Проблема в том, что я хочу, чтобы эти два элемента оставались на одной строке, даже если вы изменили размер браузера очень маленьким . Вы знаете ... как это было с таблицами.
Цель состоит в том, чтобы удержать элемент справа от упаковки, несмотря ни на что .
Как мне сказать браузеру с помощью CSS, что я бы скорее растянул содержимое,div
чем обернул его, чтобы float: right;
div был ниже float: left;
div
?
что я хочу:
\
+---------------+ +------------------------/
| float: left; | | float: right; \
| | | /
| | |content stretching \ Screen Edge
| | |the div off the screen / <---
+---------------+ +------------------------\
/
css
css-float
css-tables
stretching
Jiaaro
источник
источник
Ответы:
Оберните ваши плавающие
<div>
s в контейнер,<div>
который использует этот кросс-браузерный хак минимальной ширины:Вам также может понадобиться установить переполнение, но, вероятно, нет.
Это работает, потому что:
!important
Декларация, в сочетании сmin-width
причиной все , чтобы остаться на той же строке в IE7 +min-width
, но имеет такую ошибку, котораяwidth: 100px
переопределяет!important
объявление, в результате чего ширина контейнера составляет 100 пикселей.источник
Другой вариант, вместо плавающего, установить свойство whiterap nowrap для родительского div:
и сбросьте пробел и используйте отображение встроенного блока, чтобы div оставались на той же строке, но вы все равно могли бы дать ей ширину.
Вот JSFiddle: https://jsfiddle.net/9g8ud31o/
источник
Оберните ваши поплавки в div с минимальной шириной, превышающей объединенную ширину + отступ поплавков.
Никаких хаков или таблиц HTML не требуется.
источник
Решение 1:
display: table-cell (не широко поддерживается)
Решение 2:
таблицы
(Я ненавижу хаки.)
источник
Другой вариант: не перемещайте правую колонку; просто дайте ему левое поле, чтобы вывести его за пределы поплавка. Вам понадобится взломать или два, чтобы исправить IE6, но это основная идея.
источник
Вы уверены, что плавающие блочные элементы являются лучшим решением этой проблемы?
Часто с трудностями CSS в моем опыте получается, что причина, по которой я не вижу способа сделать то, что я хочу, состоит в том, что я попал в туннельное видение в отношении моей разметки (размышляя «как я могу сделать это элементы делают это ? ") вместо того, чтобы возвращаться и смотреть на то, что именно мне нужно, и, возможно, немного переработать мой html, чтобы облегчить это.
источник
я бы порекомендовал использовать таблицы для этой проблемы. У меня похожая проблема, и пока таблица используется только для отображения некоторых данных, а не для макета главной страницы, это нормально.
источник
Добавьте эту строку в ваш селектор плавающих элементов
Это предотвратит добавление отступов и границ к ширине, поэтому элемент всегда остается в строке, даже если у вас есть, например. три элемента с шириной 33,33333%
источник
Когда пользователь уменьшает размер окна по горизонтали, и это приводит к тому, что поплавки складываются по вертикали, удаляйте поплавки и во втором div (который был поплавком) используйте margin-top: -123px (ваше значение) и margin-left: 444px (ваше значение), чтобы поместите div, как они появились с поплавками. Когда это сделано таким образом, когда окно сужается, правый элемент div остается на месте и исчезает, когда страница слишком узкая, чтобы включить ее. ... что (для меня) лучше, чем когда "правый" div "прыгает" ниже левого div, когда окно браузера сужается пользователем.
источник
Способ, которым я обошел это, заключался в использовании некоторого jQuery. Причина, по которой я сделал это, была в том, что A и B были в процентах ширины.
HTML:
CSS:
JQuery:
источник