Як зберегти 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 пікселів.

Іншим варіантом є, замість плаваючого, встановити властивість white-space nowrap до батьківського div:

.parent {
     white-space: nowrap;
}

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

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

Ось JSFiddle: https://jsfiddle.net/9g8ud31o/

Оберніть ваші плаваючі машини в div з мінімальною шириною, більшою за комбіновану ширину + поле плавзаводів.

Не потрібні хаки або таблиці HTML.

Рішення 1:

дисплей: комірка таблиці (не широко підтримується)

Рішення 2:

таблиці

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

Інший варіант: не плавати правою колонкою; просто дайте йому ліве поле, щоб перемістити його за межі поплавця. Вам знадобиться хакер чи два, щоб виправити IE6, але це основна ідея.

Ви впевнені, що плаваючі елементи рівня блоку є найкращим рішенням цієї проблеми?

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

я б рекомендував використовувати таблиці для цієї проблеми. У мене подібне питання, і поки таблиця використовується лише для відображення деяких даних, а не для макета головної сторінки, це нормально.

Додайте цей рядок до селектора з плаваючим елементом

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

Це запобіжить додаванню заповнення та меж до ширини, тому елемент завжди залишається в рядку, навіть якщо у вас є напр. три елементи шириною 33,33333%

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

Я обійшов це шляхом використання деяких jQuery. Причиною того, що я зробив це таким чином, було те, що А і В були відсотковою шириною.

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());
});