CSS floats - как сохранить их на одной строке?

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

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

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

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

Пример: что я хочу:

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

.parent {
     white-space: nowrap;
}

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

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

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

Ответ 3

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

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

Ответ 4

Решение 1:

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

Решение 2:

таблицы

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Добавьте эту строку в свой селектор перемещаемых элементов

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

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

Ответ 9

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

Ответ 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());
});