Как мне сохранить CSS-плавающие в одной строке?

216

Я хочу, чтобы два элемента в одной строке использовались float: leftдля элемента слева.

У меня нет проблем в достижении этого в одиночку. Проблема в том, что я хочу, чтобы эти два элемента оставались на одной строке, даже если вы изменили размер браузера очень маленьким . Вы знаете ... как это было с таблицами.

Цель состоит в том, чтобы удержать элемент справа от упаковки, несмотря ни на что .

Как мне сказать браузеру с помощью CSS, что я бы скорее растянул содержимое,div чем обернул его, чтобы float: right;div был ниже float: left; div?

что я хочу:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
Jiaaro
источник
54
Насколько было бы здорово, если бы StackOverlow добавил маленький виджет для рисования, чтобы мы могли создавать эти диаграммы с помощью мыши? Может быть более подходящим для ориентированных на дизайн сайтов SE ... но, тем не менее, это было бы здорово.
JoeCool
5
@JoeCool На сайте UX SE уже есть инструмент для создания макетов. meta.ux.stackexchange.com/questions/1291/…
Фрэнк Гаддер

Ответы:

77

Оберните ваши плавающие <div>s в контейнер, <div>который использует этот кросс-браузерный хак минимальной ширины:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Вам также может понадобиться установить переполнение, но, вероятно, нет.

Это работает, потому что:

  • !importantДекларация, в сочетании с min-widthпричиной все , чтобы остаться на той же строке в IE7 +
  • IE6 не реализует min-width, но имеет такую ​​ошибку, которая width: 100pxпереопределяет !importantобъявление, в результате чего ширина контейнера составляет 100 пикселей.
Эрик Венделин
источник
Это прекрасно работает для двух поплавков, но не для трех. Может ли это работать на три ??
tylerthemiler
15
Единственная проблема заключается в том, что он заставляет фиксированную минимальную ширину.
Мэтт Монтег
6
Это не решение, это просто минимальная ширина, когда ваш контент становится очень маленьким (см. Вопрос), поэтому ниже 100px у вас та же проблема. Это особенно актуально для ячеек таблицы.
Санне
Абсолютно шокирующий - решил мою проблему мгновенно. Я боролся с этой проблемой в простом двухстрочном макете начальной загрузки с большим количеством хаков, чем я могу назвать, но это сработало отлично. Спасибо за объяснение, почему эта работа - захватывающая штука, дом.
нокарьер
Это может работать с divs, но я только что протестировал его с ul / li, и он не работает :(
AsGoodAsItGets
132

Другой вариант, вместо плавающего, установить свойство whiterap nowrap для родительского div:

.parent {
     white-space: nowrap;
}

и сбросьте пробел и используйте отображение встроенного блока, чтобы div оставались на той же строке, но вы все равно могли бы дать ей ширину.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Вот JSFiddle: https://jsfiddle.net/9g8ud31o/

Innovaat
источник
4
Определенно лучшее решение, которое я видел. Это работает для моего варианта использования, но мне интересно, насколько хорошо это поддерживается. К счастью, использование поплавков для ВСЕГО постепенно уходит в прошлое.
Райан Оре
1
Можете ли вы объяснить, как это работает? или какие-то ссылки хотя бы?
Anirudhan J
4
@AnirudhanJ Это не так уж сложно. Inline-block заставляет элементы нормально перемещаться со встроенным текстом (но сохраняет некоторые возможности заполнения / отступа блока), и вы буквально просто указываете CSS не переносить текст с помощью параметра white-space: nowrap (применяя «normal»). «Снова к ребенку, чтобы не допустить его распространения во всем)
Брайан
Как вы получаете div справа, чтобы всплывать справа от экрана? Это просто помещает два встроенных блока рядом друг с другом, что не приведет к разрыву строки.
addMitt
Вы также можете использовать межстрочный интервал: -3px (или любое другое значение, которое вам подходит ), чтобы удалить пробел между элементами inline-block. PS: лучше принятого ответа ;
Клавдиу
15

Оберните ваши поплавки в div с минимальной шириной, превышающей объединенную ширину + отступ поплавков.

Никаких хаков или таблиц HTML не требуется.

самодержец
источник
10

Решение 1:

display: table-cell (не широко поддерживается)

Решение 2:

таблицы

(Я ненавижу хаки.)

pkario
источник
8

Другой вариант: не перемещайте правую колонку; просто дайте ему левое поле, чтобы вывести его за пределы поплавка. Вам понадобится взломать или два, чтобы исправить IE6, но это основная идея.

Стив Клэй
источник
4

Вы уверены, что плавающие блочные элементы являются лучшим решением этой проблемы?

Часто с трудностями CSS в моем опыте получается, что причина, по которой я не вижу способа сделать то, что я хочу, состоит в том, что я попал в туннельное видение в отношении моей разметки (размышляя «как я могу сделать это элементы делают это ? ") вместо того, чтобы возвращаться и смотреть на то, что именно мне нужно, и, возможно, немного переработать мой html, чтобы облегчить это.

glenatron
источник
Ну, это работает практически для всего, и существующий макет основан на нем, я просто пытаюсь решить проблему с разрывом макета, когда вы слишком сильно увеличиваете размер текста ИЛИ изменяете размер окна браузера меньше
700 пикселей в
2

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

Роб Эллиотт
источник
2

Добавьте эту строку в ваш селектор плавающих элементов

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Это предотвратит добавление отступов и границ к ширине, поэтому элемент всегда остается в строке, даже если у вас есть, например. три элемента с шириной 33,33333%

Nebojsha
источник
0

Когда пользователь уменьшает размер окна по горизонтали, и это приводит к тому, что поплавки складываются по вертикали, удаляйте поплавки и во втором div (который был поплавком) используйте margin-top: -123px (ваше значение) и margin-left: 444px (ваше значение), чтобы поместите div, как они появились с поплавками. Когда это сделано таким образом, когда окно сужается, правый элемент div остается на месте и исчезает, когда страница слишком узкая, чтобы включить ее. ... что (для меня) лучше, чем когда "правый" div "прыгает" ниже левого div, когда окно браузера сужается пользователем.

Брюс Аллен
источник
-3

Способ, которым я обошел это, заключался в использовании некоторого jQuery. Причина, по которой я сделал это, была в том, что A и B были в процентах ширины.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

JQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});
ScubaSteve
источник
1
Фреймворк для CSS? У меня есть -jquery для ВСЕХ поисков JavaScript, и из-за полного и полного игнорирования качества мы также должны начать явный поиск CSS с -jquery? Делай это правильно или не делай этого вообще.
Джон