Augmente div en largeur maximale lorsque float: left est défini
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai quelque chose comme ça:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
les deux flotteurs sont nécessaires. Je veux que la div du contenu remplisse tout l’écran moins les 100 pixels du menu. Si je n'utilise pas float, la div se développe exactement comme il se doit. Mais comment définir cela quand float est défini? Si j'utilise qch comme
style=width:100%
alors le contenu div 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 correspond pas à la droite du menu et est ensuite affiché ci-dessous.
La solution
Si tout va bien, je vous ai bien compris. 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>
Autres conseils
La manière la plus compatible entre tous que j'ai trouvée de faire cela n'est pas très évidente. Vous devez supprimer le float de la deuxième colonne et lui appliquer overflow: hidden . Bien que cela semble masquer tout contenu en dehors de la div, cela oblige en fait la div à rester au sein de 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 sera utile pour tous ceux qui ont ce problème. C'est ce que j'ai trouvé qui fonctionne le mieux pour le site que je construisais, après avoir tenté de l'adapter à d'autres résolutions. Malheureusement, cela ne fonctionne pas si vous incluez un div après le contenu, si quelqu'un connaît un bon moyen de le faire fonctionner, avec une bonne compatibilité IE, je serais très heureux de l'entendre.
Nouvelle, meilleure option avec display: flex;
Maintenant que le modèle Flexbox est implémenté à grande échelle, je vous conseillerais plutôt de l'utiliser, car il permet beaucoup plus de flex avec la présentation. Voici un simple deux colonnes 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 à largeur variable!
<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 fixer la taille sur votre marge
.content .right{
overflow: auto;
background-color: red;
}
+1 pour Merkuro, mais si la taille du flottant change, votre marge fixe échouera.
Si vous utilisez ci-dessus CSS à droite div , sa taille changera de manière agréable, tandis que celle de gauche sera modifiée. C'est un peu plus souple comme ça.
Vérifiez le violon ici: http://jsfiddle.net/9ZHBK/144/
Les éléments flottants sortent de la présentation de flux 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 trouver des solutions permettant de créer la disposition de deux colonnes que vous recherchez: http://www.maxdesign.com.au/presentation/page_layouts/
Plus précisément, la "disposition liquide à deux colonnes".
Salut!
Ceci est une solution mise à jour pour HTML 5 si quelqu'un est intéressé & amp; pas friands de "flottant".
La table fonctionne très bien dans ce cas car vous pouvez définir la largeur fixe sur la table & amp; table-cellule.
.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 basé sur la solution de merkuro , si vous souhaitez agrandir celle de 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, il peut donc sembler cassé sous IE.
La réponse acceptée peut fonctionner, mais je n'aime pas l'idée de superposer des marges. En HTML5, vous feriez cela avec display: flex; . C'est une solution propre. Il suffit de définir la largeur d'un élément et flex-grow: 1; pour l'élément dynamique. Une version révisée du violon merkuros: https://jsfiddle.net/EAEKc/1499/
Bonjour, il existe un moyen simple d'utiliser la méthode cachée de débordement sur l'élément de droite.
.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 pourrait fonctionner:
div{
display:inline-block;
width:100%;
float:left;
}
