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

Question

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

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

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

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

что я хочу:

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

Answer 1

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

.parent {
     white-space: nowrap;
}

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

Нет необходимости в хаке или HTML-таблицах.

Answer 4

Решение 1:

display: ячейка таблицы (широко не поддерживается)

Решение 2:

Таблица

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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