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

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

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

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

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

что я хочу:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

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

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

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

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

• !importantДекларация, в сочетании с min-widthпричиной все , чтобы остаться на той же строке в IE7 +
• IE6 не реализует min-width, но имеет такую ​​ошибку, которая width: 100pxпереопределяет !importantобъявление, в результате чего ширина контейнера составляет 100 пикселей.

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

.parent {
     white-space: nowrap;
}

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

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

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

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

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

Решение 1:

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

Решение 2:

таблицы

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

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

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

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

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

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

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

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

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

Способ, которым я обошел это, заключался в использовании некоторого 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());
});