Centre de plusieurs divs flottantes uns à côté des autres

Je suis censé faire 3 divs asseoir à côté les uns des autres. J'ai donc fait un div et j'ai mis trois divs, avec le style css:

div.holder div {
  float: left;
  width: 250px;
  background-color: yellow;   

  /*margin-right:auto;  /**These did not help**/
  margin-left:auto;  */
}

Et html comme ceci:

<div class="holder">
  <div></div>
  <div></div>
  <div></div>
</div>

Et il est censé ressembler à ceci:
Centre de plusieurs divs flottantes uns à côté des autres
Et au lieu de cela, il ressemble à ceci:
Centre de plusieurs divs flottantes uns à côté des autres

La frontière divs doit être aligné avec la fin de la ligne grise.

Si vous voulez que votre "or div" collé à droite, le float: right.
C'est une excellente idée. Maintenant, si vous connaissez un moyen de mettre de l'argent dans le milieu, j'aimerais être fait avec elle. Peut-être que je vais essayer margin:auto.
Le fil de discussion suivant est exactement ce que vous cherchez pour Liquide de largeur espacés de façon égale, les DIVs
oh je suis désolé, je ne pouvais pas trouver la bonne requête de recherche.

OriginalL'auteur Tomáš Zato | 2013-08-27

  1. 5

    Vous spécifiez une valeur de pixels pour la largeur de votre. Peu importe ce que vous faites avec votre flotte, ces valeurs de pixels sont fixes et ne sera jamais atteindre la fin de la frontière. Ce que vous pouvez faire est de définir la largeur en pourcentage comme width: 33%;. Vous pouvez aussi définir les marges gauche et droite de l'espace sur votre divs comme margin: 0 20px;.

    Ce qui en général, je ne dans ces situations, c'est enrouler ma éléments dans un div et l'utiliser à la div pour le positionnement des éléments. Ensuite, le récipient intérieur je vais utiliser pour les couleurs de fond, les couleurs de texte, etc. Quelque chose comme ça pourrait fonctionner pour vous:

    <div class="holder">
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
  <div class="wrapper">
     <div class="container">...</div>
  </div>
</div>

    Et le CSS:

    .wrapper {
    float:left;
    width:33%;
}
.container {
    background-color: yellow;
    margin: 10px;
    padding: 20px;
}

    Ici est un violon: http://jsfiddle.net/bWFS8/

    OriginalL'auteur Matthew R.

  2. 0

    C'est ce que j'utilise quand je veux divs uns à côté des autres:

    CSS:

    #menuitem {
font-weight:bold;
border-right-style:solid;
font-size:10.7px;
border-right-width:1px;
border-left-width:1px;
height:30px;
position:relative;
}

#menuitem span {
position:absolute;
text-align: center;
}

#menubar {
margin-top:10px;
position:absolute;
left:0px;
font-family:Verdana, Geneva, sans-serif;
}

    HTML:

    <div id="menubar">
<div style="float:left;width:104px;border-left-style:solid;" id="menuitem"><span style="bottom:9px;width:104px;">Menu Item 1</span></div>
<div style="float:left;overflow:hidden;width:78px;" id="menuitem"><span style="bottom:7px;width:78px;">Menu Item 2</span></div>
<div style="float:left;overflow:hidden;width:100px;" id="menuitem"><span style="bottom:9px;width:100px;">Menu Item 3</span></div>
</div>

    Espère que j'ai aidé.

    OriginalL'auteur vaskort

  3. 0

    Si vous allez avoir tous alignés horizontalement, alors vous devriez vraiment utiliser une liste non ordonnée de style pour affichage inline block avec zoom:1 et display:inline.

    Il n'y a pas de raison d'utiliser un flotteur à la position de ces côtoient.

    OriginalL'auteur THE AMAZING