Espande div alla larghezza massima quando è impostato float: left

115

Ho qualcosa del genere:

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

entrambi i galleggianti sono necessari. Voglio che il div contenuto riempia l'intero schermo meno quei 100px per il menu. Se non uso float, il div si espande esattamente come dovrebbe. Ma come lo imposto quando è impostato float? Se uso qc come

style=width:100%

quindi il div contenuto ottiene la dimensione del genitore, che è il corpo o un altro div che ho anche provato, e quindi ovviamente non si adatta a destra del menu e viene quindi mostrato di seguito.

html width

— Flo
fonte

138

Spero di averti capito bene, dai un'occhiata a questo: 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>

Espandi lo snippet

— merkuro
fonte

5

La domanda afferma "entrambi i galleggianti sono necessari".

— Crescent Fresh

8

Sì, hai ragione e sono d'accordo. Tuttavia penso che Flo abbia menzionato solo questo, perché pensa che siano entrambe le cose! necessario per ottenere il layout desiderato e quindi la mia soluzione alternativa.

— merkuro

@merkuro: buon punto. Sono d'accordo, ".right" non ha bisogno di essere flottato per ottenere l'effetto desiderato. @ Flo: puoi confermare, il div del contenuto deve essere flottato? Come per altri motivi?

— Crescent Fresh

potrebbe funzionare, ci proverò un po ', hai capito bene questo motivo, e il galleggiante è più carino, ma immagino che non funzionerà

— Flo,

2

Ahh jeah e vedo di nuovo il motivo per cui l'ho cambiato in float: Ie7 e Firefox vanno bene, ma cioè 5.5 e ie 6 iniziano il margine sul bordo destro del div sinistro, quindi ha 236px (la larghezza reale, 100 era un esempio) divario tra i due div

— Flo

100

Il modo più cross-compatibile che ho trovato per farlo non è molto ovvio. È necessario rimuovere il galleggiante dalla seconda colonna e applicarvi overflow:hidden. Anche se questo sembrerebbe nascondere qualsiasi contenuto al di fuori del div, in realtà costringe il div a rimanere all'interno del suo genitore.

Usando il tuo codice, questo è un esempio di come potrebbe essere fatto:

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

Spero che questo sia utile a chiunque abbia questo problema, è quello che ho trovato funziona meglio per il sito che stavo costruendo, dopo aver cercato di adattarlo ad altre risoluzioni. Sfortunatamente, questo non funziona se includi anche un float a destra divdopo il contenuto, se qualcuno conosce un buon modo per farlo funzionare, con una buona compatibilità con IE, sarei molto felice di ascoltarlo.

Nuova, migliore opzione utilizzando `display: flex;`

Ora che il modello Flexbox è implementato abbastanza ampiamente, in realtà consiglierei di usarlo al suo posto, poiché consente molta più flexfacilità con il layout. Ecco una semplice due colonne come l'originale:

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

Ed ecco una tre colonne con una colonna centrale di larghezza flessibile!

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

— alanaktion
fonte

Dopo alcuni ulteriori test, sembra che non sia necessario attivare hasLayout con "position: relative" affinché funzioni in IE 6, non sono sicuro di IE 5, ma generalmente non è un problema includerlo comunque, solo per essere al sicuro.

— alanaktion

1

Questa risposta sembra poco apprezzata, ma è davvero bello saperlo. Questo ti fa fluttuare, anche con un elemento fluttuante all'interno del div. Sono un "contesto di formattazione del blocco" di Google. proprio adesso.

— Carlos Gil

Il modo migliore è usare una semplice tabella a 2 colonne invece di perdere tempo ad aggiungere tonnellate di trucchi CSS non compatibili con browser incrociati

— Marco Demaio

@Marco Avevo bisogno di usare i CSS per questo dato che il mio design è reattivo. Dimensioni dello schermo diverse richiedevano layout diversi, quindi una tabella non avrebbe funzionato. Inoltre, questo metodo sembra funzionare praticamente in qualsiasi browser che chiunque utilizzi ancora.

— alanaktion

1

@MarcoDemaio, il mio punto era che su una dimensione dello schermo in cui la colonna fissa più piccola sarebbe grande circa quanto la colonna principale, ad esempio su un dispositivo mobile, volevo che le due colonne diventassero righe a larghezza intera, cosa che non poteva essere eseguita con le tabelle a meno che non volessi spostare effettivamente i contenuti con JavaScript.

— alanaktion

31

Soluzione senza fissare le dimensioni sul margine

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

+1 per Merkuro, ma se la dimensione del galleggiante cambia il tuo margine fisso fallirà. Se si usa sopra CSS a destra div, cambierà piacevolmente la dimensione con la modifica della dimensione sul galleggiante sinistro. È un po 'più flessibile così. Controlla il violino qui: http://jsfiddle.net/9ZHBK/144/

— Appassire
fonte

2

@alanaktion Ho portato via l'auto non necessaria. La differenza è nel valore di overflow. Apparentemente overflow: hiddene overflow autorisultato nello stesso comportamento. Penso anche che le persone apprezzino il violino.

— Wilt

Se qualcuno vuole sapere perché questo funziona, vedere qui: stackoverflow.com/a/1767270/2756409

— TylerH

Penso che questo sia meglio della soluzione di Merkuro.

— SkuraZZ

6

Gli elementi flottati vengono estratti dal normale layout di flusso e gli elementi blocco, come i DIV, non si estendono più per la larghezza del loro genitore. Le regole cambiano in questa situazione. Invece di reinventare la ruota, controlla questo sito per alcune possibili soluzioni per creare il layout a due colonne che stai cercando: http://www.maxdesign.com.au/presentation/page_layouts/

In particolare, il "layout liquido a due colonne".

Saluti!

— Sean Aitken
fonte

4

Questa è una soluzione aggiornata per HTML 5 se qualcuno è interessato e non ama il "galleggiamento".

La tabella funziona alla grande in questo caso poiché puoi impostare la larghezza fissa sulla tabella e sulla cella della tabella.

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

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

http://jsfiddle.net/EAEKc/596/ codice sorgente originale da @merkuro

— Snowie
fonte

+1 infine qualcosa che funziona con l'elemento fixed width a destra, anche se tecnicamente non usa float.

— Karthik T

+1 quindi totalmente sì. dopo anni di lotta con galleggianti, posizioni e tavoli, questa è la soluzione giusta. la soluzione accettata propaga CSS non sicuri.

— Horace

4

questo utilizzo potrebbe risolvere il tuo problema.

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>

Espandi lo snippet

— suathd
fonte

Benvenuto in SO. Potresti aggiungere una spiegazione su come funziona?

— yacc

3

E in base alla merkurosoluzione di, se desideri massimizzare quella a sinistra, dovresti usare:

<!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>

Non è stato testato su IE, quindi potrebbe sembrare non funzionante su IE.

— kubilayeksioglu
fonte

1

La risposta accettata potrebbe funzionare, ma non mi piace l'idea di margini sovrapposti. In HTML5, lo faresti con display: flex;. È una soluzione pulita. Basta impostare la larghezza per un elemento e flex-grow: 1;per l'elemento dinamico. Una versione modificata del violino merkuros: https://jsfiddle.net/EAEKc/1499/

— Christoph Bühler
fonte

0

Ciao, c'è un modo semplice con il metodo nascosto di overflow sull'elemento destro.

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

Espandi lo snippet

— Sanjib Debnath
fonte

-1

Questo potrebbe funzionare:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

— kirtan-shah
fonte

Espande div alla larghezza massima quando è impostato float: left

Nuova, migliore opzione utilizzando display: flex;

Soluzione senza fissare le dimensioni sul margine

Nuova, migliore opzione utilizzando `display: flex;`