web-dev-qa-db-fra.com

Comment puis-je faire un float top avec CSS?

Je sais que CSS prend en charge uniquement les valeurs gauche et droite de la propriété float, mais existe-t-il une technique permettant d'implémenter un sommet flottant? Je vais essayer d'expliquer. J'ai le code suivant:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

Avec ce code, chaque div est flotté à gauche jusqu'à ce que la limite droite de la page soit atteinte. Je veux faire la même chose mais verticalement, de sorte que chaque div soit placée au bas de la précédente, puis, lorsque la limite inférieure de la page est atteinte, une nouvelle colonne est créée. Y a-t-il un moyen de faire cela en utilisant seulement CSS (et peut-être en modifiant le code HTML)?

htmlcsscss-float
63
mck89

La seule façon de faire cela avec CSS uniquement consiste à utiliser CSS 3 qui ne fonctionnera pas sur tous les navigateurs (uniquement la dernière génération, telle que FF 3.5, Opera, Safari, Chrome).

En effet, avec CSS 3, il existe cette superbe propriété: column-count que vous pouvez utiliser comme ceci:

#myContent{
  column-count: 2;
  column-gap: 20px;
  height: 350px;
}

Si #myContent encapsule vos autres divs.

Plus d'infos ici: http://www.quirksmode.org/css/multicolumn.html

Comme vous pouvez le lire, il existe de sérieuses limites à l’utilisation de cette méthode. Dans l'exemple ci-dessus, l'ajout d'une colonne à une autre ne se produit que si le contenu dépasse . Dans Mozilla, vous pouvez utiliser la propriété column-width qui vous permet de diviser le contenu en autant de colonnes que nécessaire.

Sinon, vous devrez répartir le contenu entre différents divs en Javascript ou dans le backend.

27
Guillaume Flandre

Utilisez simplement vertical-align:

.className {
    display: inline-block;
    vertical-align: top;
}
30
Abhishek Goel

Hugogi Raudel a mis au point un moyen intéressant d’y parvenir par CSS. supposons que notre balise HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Vous pouvez obtenir une colonne de 3 lignes à l’aide de ce code CSS:

li:nth-child(3n+2){
  margin: 120px 0 0 -110px;
}

li:nth-child(3n+3) {
  margin: 230px 0 0 -110px;
}

Et voici le résultat final:
enter image description here
Ce que nous faisons ici consiste à ajouter une marge appropriée pour chaque élément de la ligne. Cette limite d'approche est que vous devez déterminer le nombre de lignes de la colonne. ça ne va pas être dynamique. Je suis sûr que cela a des cas d'utilisation, j'ai donc inclus cette solution ici. 

15
Arash Milani

Il n'y a pas de float:top, seulement float:left et float:right

Si vous souhaitez afficher div les uns en dessous des autres, vous devrez faire:

<div style="float:left;clear:both"></div>
<div style="float:left;clear:both"></div>
7
James Goodwin

J'ai essayé cela juste pour m'amuser - parce que moi aussi j'aimerais une solution.

violon: http://jsfiddle.net/4V4cD/1/

html:

<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>

css:

#container { 
width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}

.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-Origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */
}

I Vous pouvez voir que cela fonctionnera avec des divs plus hautes/plus larges. Il suffit de penser de côté. J'imagine que le positionnement deviendra un problème. transform-Origin devrait en aider quelques-uns.

5
Ron

Voici une solution qui fonctionne (presque parfaite) en FF, Opera, Chrome:

    <style>
    html {height:100%}
    p {page-break-inside:avoid;text-align:center;
       width:128px;display:inline-block; 
       padding:2px;margin:2px;border:1px solid red; border-radius: 8px;}
    a {display:block;text-decoration:none}
    b {display:block;color:red}
    body {
       margin:0px;padding:1%;
       height:97%; /* less than 98 b/c scroolbar */
      -webkit-column-width:138px;
      -moz-column-width:138px;
      column-width:138px;
    }
    </style>

    <body>
    <p><b>title 1</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    </p>

    <p><b>title 2</b>
    <a>link 1</a>
    <a>link 2</a>
    <a>link 3</a>
    <a>link 4</a>
    <a>link 5</a>
    </p>

    </body>

L'astuce est "saut de page à l'intérieur: éviter" sur P et largeur de colonne sur BODY. Il vient avec un nombre de colonnes dynamique. Le texte en A peut être multiligne et les blocs peuvent avoir des hauteurs différentes.

Peut-être que quelqu'un a quelque chose pour Edge et IE

2
user6594402

Je pense que le meilleur moyen d’accomplir ce dont vous parlez est d’avoir un ensemble de divs qui seront vos colonnes et d’alimenter celles-ci de la manière que vous avez décrite. Puis remplissez ces divs verticalement avec le contenu dont vous parlez. 

2
iandisme
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>
<div class="block blockLeft">...</div>
<div class="block blockRight">...</div>

block {width:300px;}
blockLeft {float:left;}
blockRight {float:right;}

Mais si le nombre d'éléments de div n'est pas fixe ou si vous ne savez pas à quel point cela pourrait être, vous avez toujours besoin de JS. utiliser jQuery :even, :odd

2
glazsasha

Pour réaliser cela en utilisant CSS3, ce ne sera pas si difficile tant que je vous comprends bien. Disons que la HTML DIV ressemble à ceci:

<div class="rightDIV">
   <p>Some content</p>
<div>
<!-- -->
<div class="leftDIV">
   <p>Some content</p>
</div>

Et le CSS serait comme suit. Ce que fera le CSS suivant, c'est que votre DIV exécute un float à gauche, qui le "collera" à la gauche de l'élément DIV parent. Ensuite, vous utilisez un "top: 0", et il "collera" en haut de la fenêtre du navigateur.

  #rightDIV {
       float: left
       top: 0
    }
  #leftDIV {
       float: right;
       top: 0
   }
2
Jason

Je viens de faire avec JQuery.

J'ai testé dans Firefox et IE10.

Dans mon problème, les articles ont des hauteurs différentes.

<!DOCTYPE html>
<html>
<head>
    <style>
        .item {
            border: 1px solid #FF0;
            width: 100px;
            position: relative;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <script>
        function itemClicked(e) {
            if (navigator.appName == 'Microsoft Internet Explorer')
                e.removeNode();
            else
                e.remove();
            reposition();
        }

        function reposition() {
            var px = 0;
            var py = 0;
            var margeY = 0;
            var limitContainer = $('#divContainer').innerHeight();
            var voltaY=false;

            $('#divContainer .item').each(function(key, value){
                var c = $(value);

                if ((py+c.outerHeight()) > limitContainer) {
                    px+=100;
                    margeY-=py;
                    py=0;
                    voltaY=true;
                }

                c.animate({
                    left:px+'px',
                    top:margeY+'px'
                });

                voltaY=false;
                py+=c.outerHeight();
            });
        }

        function addItem() {
            $('#divContainer').append('<div class="item" style="height: '+Math.floor(Math.random()*3+1)*20+'px;" onclick="itemClicked(this);"></div>');
            reposition();
        }

    </script>
    <div id="divMarge" style="height: 100px;"></div>
    <div id="divContainer" style="height: 200px; border: 1px solid #F00;">
        <!--div class="item"></div-->
    </div>
    <div style="border: 1px solid #00F;">
        <input type="button" value="Add Item" onclick="addItem();" />
    </div>
</body>
</html>
2
Flavio Sousa

L'astuce qui a fonctionné pour moi était de changer le mode d'écriture pendant la durée de l'alignement div.

.outer{  
  /* Limit height of outer div so there has to be a line-break*/
  height:100px;
  
  /*  Tell the browser we are writing chinese. This makes everything that is text
  top-bottom then left to right. */
  writing-mode:vertical-lr;

}

.outer > div{
  /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
  */
  float:left;
  width:40px;  
  
  /* Switch back to normal writing mode. If you leave this out, everything inside the
  div will also be top-bottom. */
  writing-mode:horizontal-tb;

}
<div class="outer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

1
KarlsFriend

Vous pourrez peut-être faire quelque chose avec des sélecteurs frères, par exemple:

div + div + div + div{
float: left
}

Pas essayé mais cela pourrait laisser la 4ème div gauche faire peut-être ce que vous voulez. Encore une fois pas complètement pris en charge.

0
matpol

Je sais que cette question est ancienne. Mais tous ceux qui cherchent à le faire aujourd'hui, voilà.

div.floatablediv{
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
div.floatcontainer{
  -webkit-column-count: 2;
	-webkit-column-gap: 1px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 1px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 1px;
	column-fill: auto;
}
<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
  <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
  </div>
    <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
  </div>
    <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
  </div>
    <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
  </div>
  <div style="clear:both;"></div>
</div>

0
aBetterGamer

Cela fonctionne, appliquer dans ul:

display:flex;
flex-direction:column;
flex-wrap:wrap;
0
Roney