Étendre div à la largeur maximale lorsque float: left est défini
j'ai quelque chose comme ça:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
les deux flotteurs sont necessaires. Je veux que la div de contenu remplisse l'écran entier moins ces 100px pour le menu. Si je n'utilise pas float le div se développe exactement comme il devrait. Mais comment puis-je régler cela quand le flotteur est réglé? Si j'utilise sth comme
style=width:100%
alors le div de contenu obtient la taille du parent, qui est soit le corps ou un autre div que j'ai également essayé, et donc bien sûr, il ne convient pas à droite du menu, et est ensuite illustré ci-dessous.
10 réponses
J'espère que je vous ai bien compris, Regardez ceci: 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> la façon la plus cross-compatible que j'ai trouvé de faire ceci n'est pas très évidente. Vous devez enlever le flotteur de la deuxième colonne, et appliquer overflow:hidden à elle. Bien que cela semble cacher tout contenu qui va à l'extérieur de la div, il force réellement la div à rester dans son parent.
en utilisant votre code, Voici un exemple de la façon dont cela pourrait être fait:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
j'Espère que cela est utile à toute personne ayant ce problème, c'est que J'ai trouvé les meilleurs travaux pour le site que je construisais, après avoir essayé de le faire s'adapter à d'autres résolutions. Malheureusement, cela ne fonctionne pas si vous incluez un droit-flotté div après le contenu ainsi, si quelqu'un connaît un bon moyen pour obtenir que cela fonctionne, avec une bonne compatibilité IE, je serais très heureux de l'entendre.
nouvelle, meilleure option utilisant display: flex;
maintenant que le modèle Flexbox est assez largement mis en œuvre, je recommande en l'utilisant à la place, puisqu'il permet beaucoup plus flex l'acceptabilité avec le layout. Voici une simple deux-colonne comme l'original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
et voici une colonne à trois colonnes avec une colonne centrale flexible!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
Solution sans fixation de taille sur votre marge
.content .right{
overflow: auto;
background-color: red;
}
+1 pour Merkuro, mais si la taille du flotteur change votre marge fixe échouera.
Si u utilise au-dessus de CSS sur la droite div il changera bien la taille avec Changer la taille sur le flotteur gauche. C'est un peu plus souple comme ça.
Vérifier le violon ici: http://jsfiddle.net/9ZHBK/144 /
les éléments flottants sont retirés de la disposition d'écoulement normale, et les éléments de bloc, tels que les DIV, ne couvrent plus la largeur de leur parent. Les règles changent dans cette situation. Au lieu de réinventer la roue, consultez ce site pour quelques solutions possibles pour créer la disposition des deux colonnes que vous êtes après: http://www.maxdesign.com.au/presentation/page_layouts/
plus précisément, la"disposition liquide à deux colonnes".
santé!
il s'agit d'une solution mise à jour pour HTML 5 si quelqu'un est intéressé et n'aime pas "flotter".
Table fonctionne très bien dans ce cas car vous pouvez définir la largeur fixe à la table & table-cell.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596 / code source original de @merkuro
cet usage peut résoudre votre problème.
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> et sur la base de la solution de merkuro , si vous souhaitez maximiser celui sur la gauche, vous devez utiliser:
<!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>
N'a pas été testé sur IE, donc il peut sembler cassé sur IE.
la réponse acceptée pourrait fonctionner, mais je n'aime pas l'idée de marges chevauchantes. En HTML5, vous le feriez avec display: flex; . C'est une solution propre. Il suffit de régler la largeur d'un élément et flex-grow: 1; pour l'élément dynamique. Une version éditée de merkuros fiddle: https://jsfiddle.net/EAEKc/1499 /
salut il y a un moyen facile avec la méthode cachée de débordement sur l'élément droit.
.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> Cela peut fonctionner:
div{
display:inline-block;
width:100%;
float:left;
}