Vue d'ensemble:
Je suis en train de créer une mise en page relativement simple et détaillé ci-dessous en cours d'exécution dans des problèmes, peu importe comment j'essaie de l'approcher.problème CSS avec des éléments couvrant colonnes
Concept:
- Disposition de blocs de taille standard. Je citerai les largeurs d'unité: chaque bloc de contenu est de 240px carré avec 5px de marge autour de lui.
- Une colonne de gauche de largeur fixe de 1 unité (245px - 1 bloc + marge à gauche). Pas de problèmes ici.
- Une colonne de droite de largeur variable pour remplir l'espace restant. Pas de problèmes ici non plus.
- Dans la colonne de gauche, un nombre de blocs 1 unit x 1unit fixés dans la colonne. Aussi un espace vide en haut - encore une fois, pas un problème.
- Dans la colonne de droite: un certain nombre de blocs flottants de tailles d'unités standard qui flottent et remplissent l'espace qui leur est donné par la fenêtre du navigateur. Pas de problèmes ici.
- Enfin, un seul élément, 2 unités de large, qui se trouve à moitié dans la colonne de gauche et la moitié dans la colonne de droite, et que les blocs de la colonne de droite flottent encore autour. Voici des dragons.
Problème:
Peu importe comment j'aborde cela, il ne va pas. Ci-dessous est le code pour ma tentative existante d'une solution. Mon problème actuel est que les blocs 1x1 sur la droite ne respectent pas le bloc 2x1, et par conséquent la moitié du bloc 2x1 est écrasée par un bloc 1x1 dans la colonne de droite. Je suis conscient que cela est presque certainement un problème avec position: absolute prenant des choses hors de flux. Cependant, ne peut pas vraiment trouver un moyen de contourner ce qui ne se contente pas de jeter un autre problème à la place.
code:
<html>
<head>
<title>wat</title>
<style type="text/css">
body {
background: #ccc;
color: #000;
padding: 0px 5px 5px 0px;
margin: 0px;
}
#leftcol {
width: 245px;
margin-top: 490px;
position: absolute;
}
#rightcol {
left: 245px;
position: absolute;
}
#bigblock {
float: left;
position: relative;
margin-top: -240px;
background: red;
}
.cblock {
margin: 5px 0px 0px 5px;
float: left;
overflow: hidden;
display: block;
background: #fff;
}
.w1 {
width: 240px;
}
.w2 {
width: 485px;
}
.l1 {
height: 240px;
}
</head>
<body>
<div class="cblock w2 l1" id="bigblock">
<h1>DRAGONS</h1>
<p>Here be they</p>
</div>
<div id="leftcol">
<div class="cblock w1 l1">
<h1>Left 1</h1>
<p>1x1 block</p>
</div>
</div>
<div id="rightcol">
<div class="cblock w1 l1">
<h1>Right 1</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 2</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 3</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 4</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 5</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 6</h1>
<p>1x1 block</p>
</div>
<div class="cblock w1 l1">
<h1>Right 7</h1>
<p>1x1 block</p>
</div>
</div>
</body>
</html>
Contraintes:
Une dernière remarque que je besoin d'une compatibilité multi-navigateur, bien que je suis plus qu'heureux de faire appliquer cela avec JS si nécessaire. Cela dit, si une solution uniquement CSS existe, je serais extrêmement heureux.
Merci pour les suggestions. J'avais envisagé de faire la bonne colonne de largeur fixe mais cela ne fait que contourner vraiment le problème et je le veux vraiment élastique. Je cherche une autre solution possible (enlever complètement le conteneur de la colonne de gauche et y placer tout ce qui se trouve actuellement sur le corps) et afficherai comment cela se passe. Je n'avais pas encore regardé de frameworks. Je pourrais bien faire. Toutes les autres pensées accueillent entre-temps ... –