Как мне сохранить 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

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

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

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

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

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

Answer 2

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

.parent {
     white-space: nowrap;
}

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

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

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

Answer 3

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

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

Answer 4

Решение 1:

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

Решение 2:

таблицы

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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