Espandi div alla massima larghezza quando float: left è impostato
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho qualcosa del genere:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
entrambi i float sono necessari. Voglio che il div del contenuto riempia l'intero schermo meno quei 100px per il menu. Se non uso float il div si espande esattamente come dovrebbe. Ma come posso impostarlo quando è impostato float? Se uso sth come
style=width:100%
quindi il div del 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.
Soluzione
Spero di averti capito correttamente, 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>
Altri suggerimenti
Il modo più compatibile con cui sono stato trovato di farlo non è molto ovvio. Devi rimuovere il float dalla seconda colonna e applicare overflow: hidden . Anche se questo sembra nascondere qualsiasi contenuto che esca dal 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 farlo adeguare ad altre risoluzioni. Sfortunatamente, questo non funziona se includi un div floatato a destra anche dopo il contenuto, se qualcuno conosce un buon modo per farlo funzionare, con una buona compatibilità con IE, sarei molto felice di sentirlo.
Nuova opzione migliore usando display: flex;
Ora che il modello Flexbox è abbastanza ampiamente implementato, in realtà consiglierei di usarlo, poiché consente molta più flex con il layout. Ecco una semplice a 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 a tre colonne con una colonna centrale a 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>
Soluzione senza fissare le dimensioni sul margine
.content .right{
overflow: auto;
background-color: red;
}
+1 per Merkuro, ma se la dimensione del float cambia il tuo margine fisso fallirà.
Se usi sopra i CSS a destra div , cambieranno le dimensioni cambiando dimensioni nel float sinistro. È un po 'più flessibile del genere.
Controlla il violino qui: http://jsfiddle.net/9ZHBK/144/
Gli elementi mobili vengono estratti dal normale layout di flusso e gli elementi di blocco, come i DIV, non si estendono più sulla 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 a due colonne liquido " ;.
Cheers!
Questa è una soluzione aggiornata per HTML 5 se qualcuno è interessato & amp; non appassionato di " floating " ;.
La tabella funziona alla grande in questo caso poiché puoi impostare la larghezza fissa sulla tabella & amp; table-cell.
.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
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>
E in base alla soluzione di merkuro , se desideri massimizzare quello 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 rotto su IE.
La risposta accettata potrebbe funzionare, ma non mi piace l'idea di sovrapporre i margini. 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 di merkuros: https://jsfiddle.net/EAEKc/1499/
Ciao, c'è un modo semplice con il metodo nascosto overflow sull'elemento giusto.
.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>
Potrebbe funzionare:
div{
display:inline-block;
width:100%;
float:left;
}
