CSS Flottant Vrd À Variable Hauteurs [dupliquer]
cette question a déjà une réponse ici:
- comment créer une vue de grille/tuile? 8 réponses
j'ai le nombre infini de divs d'une largeur de 100px, qui peut s'insérer dans un parent de largeur de 250px. Quelle que soit la hauteur, j'ai besoin que les divs soient affichés en lignes, comme indiqué dans l'image. J'ai essayé de résoudre ça, mais la hauteur div semble tout gâcher.
j'apprécierais vraiment votre aide. Merci:)
<style>
#holder{
width:250px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
display:inline-block;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
}
.four{
background-color:#FF0;
}
</style>
<div id="holder">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
</div>
voici le jsfiddle
voici ce que j'ai fait et réalisé en utilisant javascript https://jsfiddle.net/8o0nwft9 /
10 réponses
à ma connaissance, il n'y a aucun moyen de résoudre ce problème avec CSS pur (qui fonctionne dans tous les navigateurs courants):
- flotteurs ne travaille pas .
-
display: inline-block
ne fonctionne pas . -
position: relative
avecposition: absolute
exige manuel de pixel tuning . Si vous utilisez un langage côté serveur, et que vous travaillez avec des images (ou quelque chose avec hauteur prévisible), vous pouvez gérer le réglage du pixel "automatiquement" avec le code côté serveur.
à la place, utilisez jQuery Masonry .
sur l'hypothèse que vos besoins sont plus comme votre code d'exemple de couleur alors:
.box:nth-child(odd){
clear:both;
}
si elle va être 3 lignes alors nth-child(3n+1)
je donne cette réponse parce que même s'il y en a de bons qui fournissent une solution ( utilisant la maçonnerie ) n'est toujours pas clair pourquoi il n'est pas possible d'atteindre cet objectif en utilisant des flotteurs.
(ceci est important - #1 ).
un élément flottant se déplace aussi loin à gauche ou à droite qu'il peut en la position où il a été à l'origine
ainsi dit:
nous avons 2 div
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-blue{
width:100px;
height:100px;
background: blue;
}
.div-red{
width:50px;
height:50px;
background: red;
}
sans float
ils seront un au-dessous de l'autre
si nous float: right
le div5
, le div6
est placé sur la ligne où le div5
était,
/*the lines are just for illustrate*/
donc si maintenant nous float: left
le div6
il se déplacera aussi loin à gauche qu'il peut, " dans cette ligne "(voir #1 ci-dessus), donc si div5
change sa ligne, div6
le suivra.
ajoutons maintenant d'autres div dans l'équation
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
.div-gree{
width:150px;
height:150px;
background: green;
float:right;
}
nous avons ceci
Si on clear: right
pour le div5
, nous le forçons à prendre la ligne Bellechasse div4
et div6
flotteront dans cette nouvelle ligne, que ce soit à droite ou à gauche.
permet maintenant d'utiliser comme exemple la question qui m'a amené ici en raison d'un duplicata forçant la pile div de gauche à droite
voici le morceau pour le tester:
div{
width:24%;
margin-right: 1%;
float: left;
margin-top:5px;
color: #fff;
font-size: 24px;
text-align: center;
}
.one{
background-color:red;
height: 50px;
}
.two{
background-color:green;
height:40px;
}
.three{
background-color:orange;
height:55px;
}
.four{
background-color:magenta;
height:25px;
}
.five{
background-color:black;
height:55px;
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="one">1*</div>
<div class="three">2*</div>
<div class="four">3*</div>
<div class="two">4*</div>
<div class="five">5*</div>
dans l'image ci-dessus, vous pouvez voir comment div.5
est stocké juste à côté de div.3
qui est parce que dans sa ligne (définie par la boîte de ligne de div.4
) qui est aussi loin qu'il peut aller, div.1*
, div.2*
, etc, flottent également à gauche de div.5
mais comme ils ne rentrent pas dans cette ligne ils vont à la ligne ci-dessous (défini par le zone de ligne de div.5
)
maintenant noter que lorsque nous réduisons la hauteur de div.2*
assez pour être moins que div.4*
comment il laisser passer à div.5*
:
j'espère que cela aidera à clarifier pourquoi cela ne peut pas être réalisé à l'aide de flotteurs. Je ne clarifie en utilisant des flotteurs (pas en ligne-bloc) en raison du titre " CSS divs flottants à Variable Hauteurs " et parce que maintenant la réponse est assez longue.
comme il a été souligné à juste titre, cela est impossible avec CSS seul... heureusement, j'ai trouvé une solution dans http://isotope.metafizzy.co/
il semble résoudre le problème complètement.
Avec un peu d'aide de ce commentaire ( CSS Bloc flotteur gauche ) j'ai compris la réponse.
Sur chaque "ligne" que je fais, j'ajoute un nom de classe left
.
Sur chaque autre "rang" que je fais, j'ajoute un nom de classe right
.
puis je flotte à gauche et à droite pour chacun de ces noms de classe!
la seule complication est que mon ordre de contenu est inversé sur le les lignes" bonnes", mais qui peuvent être résolues en utilisant PHP.
Merci pour votre aide!
#holder{
width:200px;
border:1px dotted blue;
display:inline-block;
}
.box{
width:100px;
height:150px;
background-color:#CCC;
float:left;
text-align:center;
font-size:45px;
}
.one{
background-color:#0F0;
height:200px;
}
.two{
background-color:#0FF;
}
.three{
background-color:#00F;
float:right;
}
.four{
background-color:#FF0;
float:right;
}
.left{float:left;}
.right{float:right;}
<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box four right">4</div>
<div class="box three right">3</div>
</div>
</body>
grâce à thirtydot, j'ai réalisé que ma réponse précédente n'avait pas correctement résolu le problème. Voici ma deuxième tentative, qui utilise JQuery comme solution CSS seule semble impossible:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var numberOfColumns = 3;
var numberOfColumnsPlusOne = numberOfColumns+1;
var marginBottom = 10; //Top and bottom margins added
var kids = $('#holder:first-child').children();
var add;
$.each(kids, function(key, value) {
add = numberOfColumnsPlusOne+key;
if (add <= kids.length){
$('#holder:first-child :nth-child('+(numberOfColumnsPlusOne+key)+')').offset({ top: $('#holder:first-child :nth-child('+(key+1)+')').offset().top+$('#holder:first-child :nth-child('+(key+1)+')').height()+marginBottom });
}
});
});
</script>
<style>
#holder{
width:270px;
border:1px dotted blue;
display:inline-block; /* Enables the holder to hold floated elements (look at dotted blue line with and without */
}
.box{
width:80px;
height:150px;
background-color:#CCC;
margin:5px;
text-align:center;
font-size:45px;
}
.one{
height:86px;
}
.two{
height:130px;
}
.three{
height:60px;
}
.four{
clear:both;
height:107px;
}
.five{
height:89px;
}
.six{
height:89px;
}
.left{float:left;}
.right{float:right;}
</style>
</head>
<body>
<div id="holder">
<div class="box one left">1</div>
<div class="box two left">2</div>
<div class="box three left">3</div>
<div class="box four left">4</div>
<div class="box five left">5</div>
<div class="box six left">6</div>
</div>
</body>
</body>
le seul problème qui reste pour ma solution est, ce qui se passe quand une boîte est deux boîtes-largeurs au lieu d'un seul. Je travaille encore sur cette solution. Je posterai une fois terminé.
si quelqu'un est encore à la recherche d'alternatives, en voici une. Essayez d'utiliser la propriété (- moz-/ - webkit -) column-width. Il s'occupe de la variable div height issue. Cependant, colonne-width ajoute un nouveau div à la fin de la colonne.
sinon, la maçonnerie jQuery fonctionne mieux.
ce n'est peut-être pas la solution exacte pour tout le monde, mais je trouve que (littéralement) penser en dehors de la boîte fonctionne pour de nombreux cas: au lieu d'afficher les boîtes de gauche à droite, dans de nombreux cas, vous pouvez remplir la colonne de gauche d'abord, que d'aller au milieu, remplir cela avec des boîtes et enfin remplir la colonne de droite avec des boîtes. Votre image serait alors:
Si vous utilisez un le langage de script comme php vous pouvez également remplir les colonnes de gauche à droite en y ajoutant une nouvelle boîte et en sortant quand toutes les colonnes sont remplies. eg (code php non testé):
$col1 = '<div class="col1"> <div>box1</div>';
$col2 = '<div class="col2"> <div>box2</div>';
$col3 = '<div class="col3"> <div>box3</div>';
$col1 .= '<div>box4</div> </div>'; //last </div> closes the col1 div
$col2 .= '<div>box5</div> </div>';
$col3 .= '<div>box6</div> </div>';
echo $col1.$col2.$col3;
$ col1, $ col2 et $ col3 peuvent avoir float: gauche et largeur: 33%, placer les boîtes à l'intérieur du div à pleine largeur et sans float.
évidemment si vous utilisez javascript / jquery pour charger les boîtes dynamiquement, vous êtes mieux de les styliser de cette façon aussi, comme expliqué dans d'autres réponses à ce fil.
pour afficher il suffit de mettre ce css à votre div et ensuite vous avez la disposition désirée. pas besoin de brancher ou de JS.
.Your_Outer {
background-color: #FFF;
border: 1px solid #aaaaaa;
float: none;
display:inline-block;
vertical-align:top;
margin-left: 5px;
margin-bottom: 5px;
min-width: 152.5px;
max-width: 152.5px;
}
vous pouvez modifier le code selon vos exigences:)
sur les navigateurs modernes, vous pouvez simplement faire:
display: inline-block;
vertical-align: top;