CSS Flottant Vrd À Variable Hauteurs [dupliquer]

cette question a déjà une réponse ici:

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.

enter image description here

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 /

80
demandé sur Community 2011-03-08 18:45:44

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 avec position: 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 .

67
répondu thirtydot 2014-01-29 14:18:03

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)

35
répondu FatherStorm 2011-03-08 16:02:08

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

enter image description here

si nous float: right le div5 , le div6 est placé sur la ligne où le div5 était,

/*the lines are just for illustrate*/

enter image description here

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

enter image description here

Si on clear: right pour le div5 , nous le forçons à prendre la ligne Bellechasse div4

enter image description here

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>

enter image description here

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* :

enter image description here

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.

33
répondu Yandy_Viera 2017-05-23 11:54:41

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.

8
répondu stevenmc 2011-11-01 15:21:41

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>
3
répondu stevenmc 2017-05-23 12:34:43

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é.

1
répondu stevenmc 2011-03-14 11:55:44

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.

1
répondu Rodiwa 2014-05-08 06:34:17

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:

order of filling :

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.

0
répondu bolvo 2015-08-13 14:40:01

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:)

-1
répondu Shahid Amin 2015-08-28 12:44:16

sur les navigateurs modernes, vous pouvez simplement faire:

display: inline-block;
vertical-align: top;
-3
répondu Flavio Tordini 2012-08-21 17:07:17