boîtes CSS ne flotteront pas du coin en bas à droite

Question

J'ai cherché cette solution pendant un certain temps maintenant ... [... bla bla google .. bla] ...

J'ai créé un exemple où je suis presque, mais pas tout à fait:

http://www.mikael-sandbox.com/puzzlecss/

ce que j'ai laissé ici est que je veux le numéro 1 à toujours dans le coin inférieur droit. C'est le cas tant que j'ai une seule ligne de blocs, mais que la ligne se brise, la ligne est déplacée vers le haut. Je veux que ça reste. Des pensées?

Answer 1

Si les éléments sont ajoutés dynamiquement à votre page (même s'ils ne le sont pas), il semblerait que la solution évidente serait d'inverser l'ordre de ceux-ci. Les éléments qui s'étendraient au-delà des limites du conteneur vont toujours envelopper ci-dessous. J'ai trouvé quelques liens qui pourraient vous donner un aperçu du flotteur et de l'emballage.

http://archivist.incutio.com/viewlist/css-discuss/33948

http://css.maxdesign.com.au/floatutorial/introduction.htm Voir "Où va un mouvement des éléments flottaient?"

Modifier
est-il votre largeur fixe conteneur, et que votre bit divs être une largeur constante? Si c'est le cas, alors vous savez que vous pouvez adapter X nombres de divs sur une ligne dans votre conteneur. Dans cet esprit, vous enveloppez une "rangée" dans un div, et l'effacez des deux côtés. L'exemple ci-dessous atteint les résultats que je crois que vous recherchez. Je suis à peu près certain que vous ne pourrez pas réaliser cela avec du CSS pur. Les flotteurs ne fonctionnent pas comme vous le souhaitez.

<div id="container"> 
<div id="row_wrapper" style="clear:both;"> 
<div class="bit">10</div> 
<div class="bit">11</div> 
<div class="bit">12</div> 
</div> <!--End row_wrapper --> 

<div id="row_wrapper" style="clear:both;"> 
<div class="bit">1</div> 
<div class="bit">2</div> 
<div class="bit">3</div> 
<div class="bit">4</div> 
<div class="bit">5</div> 
<div class="bit">6</div> 
<div class="bit">7</div> 
<div class="bit">8</div> 
<div class="bit">9</div> 
</div> <!--End row_wrapper --> 
</div> <!--End container -->