Как мне сохранить CSS в одну строку?

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

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

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

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

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

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

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

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

Решение 1:

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

Решение 2:

столы

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

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

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

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

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

.parent {
     white-space: nowrap;
}

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

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

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

Я решил использовать 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());
});

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

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

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

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