Come si fa a flottare due div side-by-side senza specificare una larghezza?

Ho due div, il primo non ha molto contenuto e il secondo ha un sacco di contenuti. Voglio che galleggiano affiancati in modo tale che il primo div sia largo solo quanto il testo e il secondo div riempia la quantità rimanente di spazio orizzontale. E, non voglio specificare le larghezze fisse.Come si fa a flottare due div side-by-side senza specificare una larghezza?

Ecco l'aspetto desiderato utilizzando tabelle: http://jsfiddle.net/enRkR/

può questo essere fatto facilmente con carri CSS, o è un layout di tabella l'unico modo per ottenere questo look?

fonte

2011-11-11 Nick Clark

Sì, lo si può fare con i CSS & è un lavoro in tutti i browser. Fate così:

.right{ 
    overflow:hidden; 
    background:red; 
} 
.left{ 
    float:left; 
    background:green; 
}

controllare questo esempio vivo http://jsfiddle.net/enRkR/8/

fonte

2011-11-11 04:19:44 sandeep

Grazie! Overflow: nascosto era la magia che mi mancava. –

felice di aiutare :) – sandeep

Wow, sbalorditivo. Chi avrebbe pensato "overflow: hidden;" è la risposta. Se posso 1000-up questa risposta vorrei;) Grazie! – pixelfreak

Prova questo:

<div> 
    <div id="div1" style="float:left"> 
    content 
    </div> 
    <div id="div2" > 
    content 
    </div> 
<div>

riferiscono questo: How to style Div elements as Tables

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> 
<head><title>table using divs</title> 
<style type="text/css"> 
    .div-table{display:table; border:1px solid #003399;} 
    .div-table-caption{display:table-caption; background:#009999;} 
    .div-table-row{display:table-row;} 
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;} 
</style> 
</head> 
<body> 
<div class="div-table"> 
    <div class="div-table-caption">This is a caption</div> 
    <div class="div-table-row"> 
    <div class="div-table-col">1st Column</div> 
    <div class="div-table-col">2nd Column</div> 
</div> 
</div> 
</body> 
</html>

Nota: di utilizzare questi valori delle proprietà CSS, è necessario disporre di un browser web che supporta loro. Purtroppo, che si traduce in un numero limitato di browser web come Internet Explorer 8, Firefox 3, Opera 9 e così via

fonte

2011-11-11 04:17:11

<div style="float:left">less content</div> 
<div>More content More content 
</div>

fonte

2011-11-11 04:19:35 tmjam

Come si fa a flottare due div side-by-side senza specificare una larghezza?

risposta

Problemi correlati