Rozwiń div do maksymalnej szerokości, gdy ustawiona jest zmienna float: left

115

Mam coś takiego:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

oba pływaki są konieczne. Chcę, aby element div zawartości wypełniał cały ekran bez tych 100 pikseli dla menu. Jeśli nie użyję float, div rozwija się dokładnie tak, jak powinien. Ale jak to ustawić, gdy ustawiono wartość zmiennoprzecinkową? Jeśli używam czegoś podobnego

style=width:100%

wtedy element div zawartości otrzymuje rozmiar elementu nadrzędnego, którym jest body lub inny element div, który również wypróbowałem, więc oczywiście nie mieści się na prawo od menu i jest pokazany poniżej.

html width Flo
źródło

Odpowiedzi:

138

Mam nadzieję, że dobrze Cię zrozumiałem, spójrz na to: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Rozwiń fragment

merkuro
źródło
5
Pytanie brzmi: „oba elementy pływające są konieczne”.
Crescent Fresh
8
Tak, masz rację i zgadzam się. Jednak myślę, że Flo wspomniał tylko o tym, ponieważ myśli, że są oboje! potrzebowałem uzyskać pożądany układ i dlatego moje alternatywne rozwiązanie.
merkuro
@merkuro: słuszna uwaga. Zgadzam się, „.right” nie musi być wygładzany, aby uzyskać pożądany efekt. @Flo: czy możesz potwierdzić, czy element div zawartości musi być zmienny? Lubisz z innych powodów?
Crescent Fresh
może zadziała, spróbuję trochę z tym, masz rację, a pływak jest ładniejszy, ale myślę, że to po prostu nie zadziała
Flo
2
Ahh jeah i znowu widzimy powód, dla którego zmieniłem go na float: Ie7 i Firefox radzą sobie dobrze, ale tj. 5.5 i ie 6 zaczynają margines na prawej krawędzi lewego div, więc ma 236px (rzeczywista szerokość, 100 był przykładem) różnica między dwoma divami
Flo
100

Najbardziej kompatybilny sposób, jaki znalazłem, nie jest oczywisty. Musisz usunąć pływak z drugiej kolumny i nałożyć overflow:hiddenna niego. Chociaż wydaje się, że ukrywa to zawartość wychodzącą poza element div, w rzeczywistości zmusza go do pozostania w swoim rodzicu.

Używając Twojego kodu, oto przykład, jak można to zrobić:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Mam nadzieję, że przydaje się to każdemu, kto ma ten problem, uważam, że działa najlepiej w witrynie, którą budowałem, po próbie dostosowania jej do innych rozdzielczości. Niestety, to nie zadziała, jeśli dołączysz również prawy element zmienny divpo treści, jeśli ktoś zna dobry sposób na to, aby to zadziałało, z dobrą kompatybilnością z IE, byłbym bardzo szczęśliwy, mogąc to usłyszeć.

Nowa, lepsza opcja przy użyciu display: flex;

Teraz, gdy model Flexbox jest dość szeroko wdrożony, w rzeczywistości zalecałbym jego użycie, ponieważ pozwala na znacznie większą flexelastyczność z układem. Oto prosta dwukolumnowa wersja, taka jak oryginał:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

A oto trzy kolumny ze środkową kolumną o zmiennej szerokości!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
alanaktion
źródło
Po dalszych testach okazuje się, że nie ma potrzeby wywoływania funkcji hasLayout z wartością „position: relative”, aby to zadziałało w IE 6, nie jestem pewien co do IE 5, ale generalnie nie jest problemem uwzględnienie go w każdym razie, żeby być bezpiecznym.
alanaktion
1
Ta odpowiedź wydaje się niedoceniana, ale naprawdę dobrze jest wiedzieć. Ten pozwala ci unosić się, nawet z pływającym elementem wewnątrz div. Jestem Google „kontekst formatowania blokowego”. teraz.
Carlos Gil
Najlepszym sposobem jest użycie prostych tabeli 2 Cols zamiast tracić czas dodając ton CSS nie-cross-browser-kompatybilnych sztuczek
Marco DeMaio
@Marco Potrzebowałem do tego użyć CSS, ponieważ mój projekt jest responsywny. Różne rozmiary ekranu wymagały różnych układów, więc stół by nie działał. Wydaje się również, że ta metoda działa w zasadzie w każdej przeglądarce, której wciąż używa.
alanaktion
1
@MarcoDemaio, chodziło mi o to, że na ekranie o rozmiarze, na którym mniejsza stała kolumna byłaby mniej więcej tak duża, jak kolumna główna, na przykład na urządzeniu mobilnym, chciałem, aby dwie kolumny stały się wierszami o pełnej szerokości, czego nie można zrobić z tabelami, chyba że chciałem faktycznie przenosić zawartość za pomocą JavaScript.
alanaktion
31

Rozwiązanie bez ustalania rozmiaru na marginesie

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 dla Merkuro, ale jeśli rozmiar pływaka zmieni się, ustalony margines nie powiedzie się. Jeśli użyjesz powyższego CSS po prawej divstronie, ładnie zmieni rozmiar ze zmianą rozmiaru na lewym pływającym. Jest w ten sposób bardziej elastyczny. Sprawdź skrzypce tutaj: http://jsfiddle.net/9ZHBK/144/

Więdnąć
źródło
2
@alanaktion Usunąłem niepotrzebne auto. Różnica polega na wartości przepełnienia. Najwyraźniej overflow: hiddeni overflow autoskutkują tym samym zachowaniem. Myślę też, że ludzie doceniają Skrzypce.
Wilt
Jeśli ktoś chce wiedzieć, dlaczego to działa, zobacz tutaj: stackoverflow.com/a/1767270/2756409
TylerH
Myślę, że jest to lepsze niż rozwiązanie Merkuro.
SkuraZZ
6

Elementy pływające są usuwane z normalnego układu przepływu, a elementy blokowe, takie jak DIV, nie obejmują już szerokości swojego rodzica. W tej sytuacji zasady się zmieniają. Zamiast wymyślać koło na nowo, odwiedź tę stronę, aby poznać możliwe rozwiązania umożliwiające utworzenie układu dwóch kolumn, którego szukasz: http://www.maxdesign.com.au/presentation/page_layouts/

W szczególności „Układ dwóch kolumn w płynie”.

Twoje zdrowie!

Sean Aitken
źródło
4

Jest to zaktualizowane rozwiązanie dla HTML 5, jeśli ktoś jest zainteresowany i nie lubi "pływania".

Tabela działa świetnie w tym przypadku, ponieważ możesz ustawić stałą szerokość tabeli i komórki tabeli. 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ oryginalny kod źródłowy z @merkuro

Snowie
źródło
+1 wreszcie coś, co działa z elementem o stałej szerokości po prawej stronie, nawet jeśli technicznie nie używa pływaka.
Karthik T
+1 więc całkowicie tak. po latach zmagania się ze zmiennymi, pozycjami i stołami, jest to właściwe rozwiązanie. przyjęte rozwiązanie propaguje niebezpieczne css.
horace
4

to użycie może rozwiązać twój problem.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Rozwiń fragment

suathd
źródło
Witamy w SO. Czy mógłbyś dodać wyjaśnienie, jak to działa?
yacc
3

Opierając się na merkurorozwiązaniu, jeśli chcesz zmaksymalizować to po lewej stronie, powinieneś użyć:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Nie był testowany w IE, więc może wyglądać na uszkodzony w IE.

kubilayeksioglu
źródło
1

Przyjęta odpowiedź może zadziałać, ale nie podoba mi się pomysł nakładania się marginesów. W HTML5 zrobiłbyś to z display: flex;. To czyste rozwiązanie. Wystarczy ustawić szerokość dla jednego elementu i flex-grow: 1;dla elementu dynamicznego. Zmodyfikowana wersja skrzypiec merkuros: https://jsfiddle.net/EAEKc/1499/

Christoph Bühler
źródło
0

Cześć, jest łatwy sposób z ukrytą metodą przepełnienia na prawym elemencie.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
Rozwiń fragment

Sanjib Debnath
źródło
-1

To może zadziałać: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
kirtan-shah
źródło