Disposition de 2 colonnes (Largeur fixe de la colonne de gauche, fluide de droite + clair: les deux)
Juste besoin d'aide car j'ai essayé de trier ce depuis des siècles maintenant. Ce dont j'ai besoin:
J'ai un 2 mise en page en colonnes, où la gauche de la colonne a une largeur fixe 220px et la colonne de droite a un liquide de largeur.
Code est:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html, body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,
.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main, and fluid div</div>
</div>
</body>
</html>
Il n'y a pas de problème. Lorsque j'utilise une syntaxe css clear: both dans la colonne de droite, tout le contenu après est déplacé sous la colonne de gauche. C'est un comportement approprié et rien contre elle.
Mais je relly besoin d'utiliser clear: both dans le chemin, qu'il reste juste dans le contexte de la colonne de droite (ne pas être affecté par la colonne de gauche, et ne bouge pas en dessous)
Est-il simple à obtenir autour de avec la en conservant une base float concept de conception de page?
Mise à JOUR: Veuillez consulter ce lien pour savoir de quoi je suis sur que ça peut être un peu déroutant de ma description.
Lien: http://jsfiddle.net/k4L5K/1/
source d'informationauteur Ondrej
Vous devez vous connecter pour publier un commentaire.
Voici une altération de la CSS:
Fondamentalement, ce que j'ai fait est de changer la façon dont votre présentation est faite, de sorte que
.main
div se trouve sur la droite. Pour ce faire, nous avons dû ajouter 2 choses:.wrap
div, et.main
div de 220px pour aligner correctement la partie du fluide de la page.Parce que nous avons lancée l'
.main
div sur la droite, leclear: both;
affecte uniquement le contenu à l'intérieur de la.main
div, comme vous voulez.Vous pouvez voir une démonstration ici: http://jsfiddle.net/6d2qF/1/
La question est assez ancien mais ici, c'est l'autre solution que j'ai trouvé récemment.
Nous avons juste besoin de 2 choses:
overflow: auto;
à la.main
divoverflow: hidden;
à la.wrap
div, ou l'ajout de.clear
div comme le dernier enfant de.wrap
élémentVoici la mise à jour de violon: http://jsfiddle.net/k4L5K/89/
Essayez ceci: