Affichage CSS: inline; float: à gauche, mais les blocs div ne restent pas proches l'un de l'autre

Est-ce que quelqu'un sait comment faire du bloc 3 pour ne pas passer sous le bloc 2? Je voudrais Block3 montrer sous le bloc 1 et le bloc 4 serait alors aller à droite du bloc 3.Affichage CSS: inline; float: à gauche, mais les blocs div ne restent pas proches l'un de l'autre

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html><head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <!-- don't use closing slash in meta tag, it breaks HTML4.01 transitional --> 
    <title>Test</title> 

    <style type="text/css">  
     /* in the style below the width and border and margin must not be modified */ 
     div.float_box {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px;} 
     p.clear {clear: both; height: 0px;} 
    </style> 

</head><body> 

    <!-- This outside div must not be touched or modified --> 
    <div style="width: 300px; padding: 10px; border: 1px dashed #cccccc;"> 
     <!-- Blocks' height must not be modified by adding contents or setting styles --> 
     <div class="float_box">Block 1<br><br><br><br><br></div> 
     <div class="float_box">Block 2<br><br></div> 
     <div class="float_box">Block 3<br><br><br><br><br><br><br><br></div> 
     <div class="float_box">Block 4<br><br></div> 
     <p class="clear"></p> 
    </div> 

</body></html>

Merci!

Ce n'est évidemment qu'un exemple, mais J'ai besoin d'une solution qui fonctionne de manière idoine à partir de la longueur des blocs, et indépendamment du nombre de blocs. Quelqu'un a suggéré d'utiliser "clear: both", mais cela ne résoudrait que ce cas particulier, et si j'avais un autre bloc 5 de la même hauteur ou plus long que le bloc 3 et après un autre remonter à nouveau et pour le fixer je devrais régler manuellement l'effacement tant sur le bloc 5. J'ai besoin d'une solution générale, car je ne connais pas à l'avance la longueur et le nombre de blocs (car ils sont générés dynamiquement à partir d'un DB).

Je voudrais voir tous mes blocs être déplacés l'un près de l'autre (séparés simplement par la marge 10xp j'ai mis) tout en s'insérant dans la boîte div extérieure 300px. En outre, la boîte de otside div de 300px pourrait se développer et les blocs à l'intérieur devraient repositionner les thèmes s'adaptant à la nouvelle taille (par exemple en s'insérant dans trois/quatre colonnes).

Source

2010-03-01 Marco Demaio

Vous auriez dû être plus spécifique en premier lieu que vous génériez dynamiquement les blocs et que le nombre de blocs puisse varier. – Harv

Vous devriez être en mesure d'ajouter une autre classe (« claire »?) Au bloc 3 div, avec une définition de:

div.clear { clear:both; }

Bien sûr, CSS ne se comporte pas toujours comme prévu au départ.

Source

2010-03-01 18:26:17

Mais cela ne résoudrait le problème que dans ce cas particulier, j'ai besoin d'une solution à usage général. –

J'ai changé la classe block3 à ceci (ajouté clear: left;) et cela vous donne le résultat que vous cherchiez.

div.block3 {display: inline; float: left; width: 100px; border: 1px solid #ff0000; margin: 10px; clear:left;}

EDIT: Depuis cela est maintenant connu pour être un scénario généré dynamiquement en raison de la clarification de la question, la solution est de compter le nombre total de blocs qui devront être générés au moment de l'exécution, puis ajoutez l'attribut clair, le cas échéant. Si vous ne pouvez pas savoir combien de boîtes vous aurez avant de générer le code HTML, vous ne pourrez pas faire fonctionner la mise en page. Par exemple, si vous avez cinq blocs, vous devrez ajouter des attributs clairs aux cases 3 et 5 pour vous assurer qu'ils effacent leurs voisins de gauche (dans le cas d'une solution à deux colonnes).

Si la boîte pouvait s'étendre et passer à une disposition à trois ou quatre colonnes, vous avez d'autres problèmes. Vous ne pouvez vraiment pas avoir à la fois une disposition fixe et une disposition extensible dans le cas où vous essayez de positionner des colonnes.

Source

2010-03-01 18:27:50 Harv

Mais cela ne résoudrait le problème que dans ce cas particulier, j'ai besoin d'une solution à usage général –

Affichage CSS: inline; float: à gauche, mais les blocs div ne restent pas proches l'un de l'autre

Répondre

Questions connexes