web-dev-qa-db-fra.com

Empêcher les divs flottés de retourner à la nouvelle ligne

J'ai vu cette demande à quelques reprises sur SO, et les mêmes réponses sont données, ce qui ne fonctionne pas de mon côté dans Chrome ou Firefox.

Je veux faire un ensemble de divs flottant à gauche, horizontalement une div parent avec une barre de défilement horizontale.

Je suis en mesure de démontrer ce que je veux faire avec ce css en ligne crappy ici: http://jsfiddle.net/ajkochanowicz/tSpLx/3/

Cependant, d'après les réponses données sur SO *, cela devrait fonctionner, mais cela ne me convient pas . http://jsfiddle.net/ajkochanowicz/tSpLx/2/

Y a-t-il un moyen de faire cela sans définir un positionnement absolu pour chaque article?

*par exemple. Empêcher les divs flottées de passer à la ligne suivante

htmlcsscss-float
19
Adam Grant

Cela devrait être tout ce dont vous avez besoin. 

    .float-wrap {
      /* 816 = <number of floats> * (<float width> + 2 * <float border width>) */
      width: 816px;
      border: 1px solid;
      /* causes .float-wrap's height to match its child divs */
      overflow: auto;
    }
    .left-floater {
      width: 100px;
      height: 100px;
      border: 1px solid;
      float: left;
    }
    .outer {
      overflow-x: scroll;
    }
<div class="outer">
  <div class="float-wrap">
    <div class="left-floater">
      One
    </div>
    <div class="left-floater">
      Two
    </div>
    <div class="left-floater">
      Three
    </div>
    <div class="left-floater">
      I should be to the <s>left</s> right of "Three"
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
    <div class="left-floater">
      I float.
    </div>
  </div>
</div>

.float-wrap maintient un espace ouvert pour les divs. Comme il conservera toujours au moins assez d’espace pour les garder côte à côte, ils n’auront jamais besoin d’envelopper. .outer fournit une barre de défilement et des tailles à la largeur de la fenêtre.

16
AaronSieb

Utilisez un deuxième wrapper autour des éléments avec un positionnement absolu. Ensuite, vous pouvez simplement faire flotter les éléments individuels.

<style type="text/css">
    #outter {
        position: relative;
        width: 500px;
        height: 200px;
        overflow: scroll;
    }
    #inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 200px;
    }
    #inner .item {
        float: left;
        display: inline;
    }    
</style>

<div id="outter">
    <div id="inner">
        <div class="item">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

Vous devrez ajuster la largeur de #inner en fonction du nombre d'éléments qu'il contient. Cela peut être fait au chargement si vous connaissez le nombre d'éléments ou avec javascript après le chargement de la page.

0
Kory Sharp