conteneurs séparés flottants gauche/droite pour l'autre

J'ai 5 conteneurs:conteneurs séparés flottants gauche/droite pour l'autre

<div class="wrapper"> 
<div id="container-1"></div> 
<div id="container-2"></div> 
<div id="container-3"></div> 
<div id="container-4"></div> 
<div id="container-5"></div> 
</div>

Je suis en train de flotter les 3 premiers conteneurs à gauche, et les 2 derniers à droite (en commençant à côté de la le premier flottait à gauche, en haut)

Actuellement, je n'arrivais qu'à faire flotter les 3 premiers à gauche, et les 2 derniers à droite, mais en commençant à côté du dernier, flottait le conteneur gauche et non le premier.

Fiddle:

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.left, 
 
.right { 
 
    width: 40%; 
 
    height: 100px; 
 
    float: left; 
 
    clear: left; 
 
    background: red; 
 
    margin: 5px; 
 
} 
 

 
.right { 
 
    float: right; 
 
    clear: right; 
 
    background: green; 
 
    text-align: right; 
 
}

<ul> 
 
    <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li> 
 
</ul> 
 
<div class="left"></div> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
<div class="left"></div>

Résultat attendu devrait être par exemple

Source

2017-10-07 Kemagezien

En html vous avez utilisé le sélecteur d'id et dans css vous écrivez le sélecteur de classe .. comment ça marche? –

Modifié, erreur ici parce que je viens de retaper :) mais les sélecteurs sont OK – Kemagezien

Il était seulement 5 conteneurs ou plus? –

EDIT

html, 
body { 
    margin: 0; 
    padding: 0; 
    position:relative; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    margin: 5px; 

} 

.left{ 
    float: left; 
    clear: left; 
    background: red; 
} 

.right ~ .right{ 
    position:absolute; 
    top:0; 
    right:0; 
} 
.right { 
    background: green; 
    text-align: right; 
    float:right; 
}

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

EDIT 2

 html, 
body { 
    margin: 0; 
    padding: 0; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    margin: 5px; 

} 

.left{ 
    float: left; 
    clear: left; 
    background: red; 
} 

.right { 
    background: green; 
    text-align: right; 
    float:right; 
}

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

Source

2017-10-07 10:09:22

Salut, Vous avez ajouté un container-div autour d'elle (classes gauche et droite). Je ne suis pas en mesure de changer/ajouter/supprimer le code à celui que j'ai :) – Kemagezien

hmm okey, alors vous devez le forcer à être là je suppose, mais ce ne sera pas joli, avec quelque chose comme position: relative; en bas: (quelques px). Pourquoi ne peux-tu pas le changer? –

Travaillant avec d'autres dev-people, ils décident. Im essayant d'y arriver avec flexbox mais semble le même problème. https: // jsfiddle.net/Kemagezien/zem6js03/1/ – Kemagezien

Vous pouvez utiliser Flexbox de commander les éléments

.wrapper { 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 
#container-1, #container-2, #container-3, #container-4, #container-5{ 
 
float:left; 
 
width: 50%; 
 
} 
 
#container-1 { 
 
    order:1; 
 
} 
 
#container-4 { 
 
    order:2; 
 
} 
 
#container-2 { 
 
    order:3; 
 
} 
 
#container-3 { 
 
    order:5; 
 
} 
 
#container-5 { 
 
    order:4; 
 
}

<div class="wrapper"> 
 
    <div id="container-1">container 1</div> 
 
    <div id="container-2">container 2</div> 
 
    <div id="container-3">container 3</div> 
 
    <div id="container-4">container 4</div> 
 
    <div id="container-5">container 5</div> 
 
</div>

Source

2017-10-07 10:26:33

Hey, bon début mais comme mes divs vont être dynamiques en utilisant l'ordre ne sera pas la meilleure solution. => https://jsfiddle.net/Kemagezien/p89xfrm3/ – Kemagezien

Je pense que je pourrais avoir trouvé une solution à ce problème. J'espère que je ne suis pas en retard.

Voici le nouveau code:

HTML (Ajout de quelques éléments pour le tester)

<ul> 
    <li>div's are dynamic so left/right divs will be added, so unable to fixed position them in html</li> 
</ul> 
<div class="left"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div>

CSS:

html, 
body { 
    margin: 0; 
    padding: 0; 
} 

.left, 
.right { 
    width: 40%; 
    height: 100px; 
    float: left; 
    clear: left; 
    background: red; 
    margin: 5px; 
} 

.right { 
    float: right; 
    clear: right; 
    background: green; 
    text-align: right; 
    position: relative; 
    top: -110px; 
}

est ici un violon: https://jsfiddle.net/xw456o6c/1/

Source

2017-10-18 23:41:43

conteneurs séparés flottants gauche/droite pour l'autre

Répondre

Questions connexes