web-dev-qa-db-fra.com

Flotter à gauche et à droite

ce problème me dérange depuis un certain temps. J'ai donc créé des descriptions visuelles de mon problème

Voici d'abord ma structure HTML, j'ai 6 divs .. les 3 premiers flottent à gauche et les 3 derniers flottent à droite. La dernière image montre le résultat que je veux mais ne semble pas obtenir. Quelqu'un peut-il m'aider ici

EDIT // Désolé, voici mon HTML et CSS

<style>
    .left { float:left; }
    .right { float:right; }
</style>
<div id="container">
   <div class="left"></div>
   <div class="left"></div>
   <div class="left"></div>
   <div class="right"></div>
   <div class="right"></div>
   <div class="right"></div>
</div>

REMARQUE: je ne peux pas faire une option gauche droite gauche droite droite gauche car je récupère mes données de PHP via une requête vers ma base de données .. la première requête va à gauche la deuxième requête va à droite .... merci un tas

/ÉDITER

This is a mocukup of my HTML structure

Mes flotteurs en résultent

this is my current result

C'est ce que je veux

I want this

csscss-float
32
Oldenborg

Vous pouvez utiliser CSS3 column-count propriété pour cela. Écrivez comme ceci:

.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}

Vérifiez cela http://jsfiddle.net/UaFFP/6/

15
sandeep

Flotter un à gauche, un à droite et donner d'abord le clair: les deux propriétés

<div class="left clear"></div>
<div class="right"></div>
<div class="left clear"></div>
<div class="right"></div>

css

.left {float:left}
.right {float:right}
.clear {clear:both}

Exemple

19
khaled_webdev

Ajoutez le premier div gauche, puis le premier div droit et après eux ajoutez <br style="clear:both"> et répétez la procédure.

Modifier : Voici une réponse mise à jour:

<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
<div style="border:1px solid blue;float:right;height:100px;width:100px;clear:right;"></div>
<div style="border:1px solid red;float:left;height:100px;width:100px;clear:left;"></div>
7
Дамян Станчев
<style type="text/css">

.parent {width:50px; border:1px solid red;}

.left {float:left; }

.right{float:right;}

.child{height:50px;width:50px;border:solid 1px green;margin:0 0 10px 0;}

</style>

<body>

<div class="left parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

<div class="right parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

</body>

</html>

Attention, il serait étrange de ne pas avoir de DIV central, si c'est le cas, faites flotter les DIV parentales, à des largeurs de 20% 60% 20%.

3
bdede

Supposons que vous ayez un autre div au milieu d'eux. Utilisez ensuite cet ordre chronologique:

<div class="left"></div>
<div class="right"></div>
<div class="content"></div>

Ou si vous ne le faites pas, ajoutez simplement un autre div qui fournit un style clear:both à elle.

3
Tepken Vannkorn

column-count est déjà largement pris en charge - http://caniuse.com/#feat=multicolumn Donc, si les anciens navigateurs ne vous dérangent pas, envisagez de l'utiliser.

2
Vlad

Essaye ça:

.leftcolums {
  float: left;
}

.rightcolums {
  float: right;
}

.clear {
  clear: both;
}
<div class="leftcolums">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>
<div class="rightcolums">
  <div class="right">4</div>
  <div class="right">5</div>
  <div class="right">6</div>
</div>
<div class="clear">7</div>
1
Ricky Stam

Utilisation du sélecteur: nième enfant et effacement après 2 divisions:

​div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(2n) {
    background-color: green;
    float: right;
}

exemple en direct

Sinon, utilisez cette méthode assez hacky, qui ne nécessite aucun balisage supplémentaire:

div {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
}
div:nth-child(n) {
    clear: both;
}

div:nth-child(2n) {
    background-color: green;
    float: right;
    margin-top: -50px; //match this to the div height
}

exemple en direct

0
jacktheripper