Jak utrzymać zmienne CSS w jednej linii?

Chcę mieć dwa elementy w tym samym wierszu, używając float: leftelementu po lewej stronie.

Nie mam problemów z osiągnięciem tego samodzielnie. Problem polega na tym, że chcę, aby dwa elementy pozostały w tej samej linii, nawet jeśli zmienisz rozmiar przeglądarki bardzo bardzo . Wiesz ... jak to było ze stolikami.

Celem jest, aby przedmiot po prawej nie był zawijany bez względu na wszystko .

Jak powiedzieć przeglądarce za pomocą CSS, że wolę rozciągać zawierającydiv niż zawijać, aby float: right;div był poniżej znaku float: left; div?

czego chcę:

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

Zawiń swoje pływające <div>s w kontenerze, <div>który używa tego hakowania min-szerokość przez przeglądarkę:

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

Państwo może również trzeba ustawić „przepełnienia”, ale chyba nie.

Działa to, ponieważ:

• !importantZgłoszenia w połączeniu zmin-width Bo wszystko, aby pozostać na tej samej linii w IE7 +
• IE6 nie implementuje min-width , ale ma taki błąd, że width: 100pxprzesłania !importantdeklarację, co powoduje, że szerokość kontenera wynosi 100 pikseli.

Inną opcją jest, zamiast przestawiania, ustawienie właściwości white-space nowrap na div rodzica:

.parent {
     white-space: nowrap;
}

i zresetuj białą spację i użyj wyświetlacza blokowego, aby div pozostały w tej samej linii, ale nadal możesz nadać jej szerokość.

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

Oto JSFiddle: https://jsfiddle.net/9g8ud31o/

Owiń swoje pływaki w div o minimalnej szerokości większej niż łączna szerokość + margines pływaków.

Nie wymaga żadnych włamań ani tabel HTML.

Rozwiązanie 1:

display: komórka tabeli (nie jest powszechnie obsługiwana)

Rozwiązanie 2:

stoły

(Nienawidzę włamań.)

Inna opcja: nie unoś swojej prawej kolumny; po prostu daj mu lewy margines, aby przesunąć go poza pływak. Będziesz potrzebował hacka lub dwóch, aby naprawić IE6, ale to podstawowy pomysł.

Czy jesteś pewien, że pływające elementy na poziomie bloku są najlepszym rozwiązaniem tego problemu?

Często z trudnościami CSS w moim doświadczeniu okazuje się, że powód nie widzę sposób robi to, co chcę jest, że mam złapany w tunelu-wizji w odniesieniu do mojego znaczników (myślenie „jak mogę uczynić je elementy robią to ? ”) zamiast wracać i patrzeć na to, co dokładnie muszę osiągnąć, i być może przerobić swój HTML, aby to ułatwić.

zaleciłbym używanie tabel dla tego problemu. mam podobny problem i dopóki tabela jest używana do wyświetlania niektórych danych, a nie dla układu strony głównej, jest w porządku.

Dodaj tę linię do selektora elementów pływających

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

Zapobiegnie to dodawaniu marginesów i marginesów do szerokości, więc element zawsze pozostaje w rzędzie, nawet jeśli masz np. trzy elementy o szerokości 33,333333%

Gdy użytkownik zmniejszy rozmiar okna w poziomie, a to spowoduje, że zmiennoprzecinkowe ułożą się w stos, usuń zmiennoprzecinkowe, a na drugim div (który był zmiennoprzecinkowy) użyj margin-top: -123px (twoja wartość) i margin-left: 444px (twoja wartość), aby umieść div tak, jak wyglądały za pomocą pływaków. Po wykonaniu tej czynności, gdy okno zwęża się, div div po prawej stronie pozostaje na swoim miejscu i znika, gdy strona jest zbyt wąska, aby ją uwzględnić. ... co (dla mnie) jest lepsze niż to, że div div po prawej stronie „skacze” w dół poniżej div div po lewej stronie, gdy okno przeglądarki jest zwężone przez użytkownika.

Sposób na obejście tego było użycie jQuery. Powodem tego było to, że A i B miały szerokość procentową.

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