Jak utrzymać zmienne CSS w jednej linii?


216

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  /  <---
 +---------------+  +------------------------\
                                             /

54
Jak fajnie by było, gdyby StackOverlow dodał mały widżet do rysowania, abyśmy mogli tworzyć te diagramy za pomocą myszy? Może to być bardziej odpowiednie dla witryn SE zorientowanych na projektowanie ... ale byłoby to niesamowite.
JoeCool,

5
@JoeCool Witryna UX SE faktycznie ma już narzędzie do tworzenia makiet. meta.ux.stackexchange.com/questions/1291/…
frank hadder

Odpowiedzi:


77

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.

Działa to świetnie dla dwóch pływaków, ale nie dla trzech. Czy to może działać dla trzech?
tylerthemiler

15
Jedynym problemem jest wymuszenie stałej minimalnej szerokości.
Matt Montag,

6
To nie jest rozwiązanie, to tylko minimalna szerokość, gdy twoja treść staje się naprawdę mała (patrz pytanie), więc poniżej 100 pikseli masz ten sam problem. Problem pozostaje w przypadku komórek tabeli.
Sanne,

Absolutnie szokujące - natychmiast rozwiązałem mój problem. Dusiłem się z tym problemem w prostym, dwukolumnowym układzie bootstrap z większą ilością hacków pudełkowych, niż potrafię wymienić, ale działało to doskonale. Dziękujemy za wyjaśnienie, dlaczego ta praca - fascynujące rzeczy, dom jest.
nocarrier

Może to działać z div, ale właśnie przetestowałem to z ul / li i to nie działa :(
AsGoodAsItGets

132

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/


4
Zdecydowanie najlepsze rozwiązanie, jakie widziałem. Działa w moim przypadku użycia, ale zastanawiam się, jak dobrze jest obsługiwany. Na szczęście używanie pływaków do WSZYSTKIEGO powoli staje się przeszłością.
Ryan Ore

1
Czy możesz wyjaśnić, jak to działa? lub jakieś linki przynajmniej?
Anirudhan J

4
@AnirudhanJ To nie jest zbyt trudne. Inline-block sprawia, że ​​elementy przepływają normalnie z tekstem wbudowanym (ale zachowuje niektóre możliwości wypełniania / marginesów bloku), i dosłownie po prostu mówisz CSS, aby nie zawijał tekstu za pomocą opcji białych znaków: nowrap (stosując „normal” „ponownie dziecku, aby uniknąć rozprzestrzeniania się na wszystko)
Brian

Jak jednak uzyskać div po prawej stronie, aby unosić się na prawo od ekranu? To po prostu stawia obok siebie dwa wbudowane bloki, które nie powodują łamania linii.
addMitt

możesz także użyć odstępów między literami: -3px (lub dowolnej innej wartości, która Ci odpowiada), aby usunąć odstęp między elementami bloku śródliniowego. PS: lepsza niż zaakceptowana odpowiedź ;
Claudiu

15

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.


10

Rozwiązanie 1:

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

Rozwiązanie 2:

stoły

(Nienawidzę włamań.)


8

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ł.


4

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ć.


dobrze działa na prawie wszystko i na tym opiera się istniejący układ, próbuję tylko rozwiązać problem z łamaniem układu, gdy nadmiernie zwiększasz rozmiar tekstu LUB zmieniasz rozmiar okna przeglądarki o szerokości mniejszej niż 700 pikseli
Jiaaro,

2

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.


2

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%


0

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.


-3

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

1
Ramy dla CSS? Mam opcję -jquery dla WSZYSTKICH wyszukiwań JavaScript, a ponieważ z powodu kompletnego i całkowitego lekceważenia jakości musimy zacząć jawnie szukać CSS również z opcją -jquery? Zrób to dobrze lub wcale tego nie rób.
Jan
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.