Inline éléments div

Je suis en train de mettre les éléments div juste à côté les uns des autres. Le problème est que, même si il y a assez de place pour les deux éléments pour être sur la même ligne, le nouveau div se déplace lui-même à la ligne suivante, j'ai besoin de l'autre div pour aller à la ligne suivante s'il n'y a pas assez de place.

Quelqu'un sait comment faire cela?

vous devez utiliser span éléments si vous avez besoin d'générique des éléments inline.

OriginalL'auteur Freesnöw | 2011-05-20

  1. 11

    Définir le CSS style d'affichage à display:inline-block;.

    Cela permet à l'élément pour en garder une bloc-comme la fonctionnalité, tout en lui permettant d'être affiché en ligne. Il est à mi-chemin entre les deux.

    (Mais notez qu'il existe des problèmes de compatibilité avec les anciennes versions d'IE)

    Voir ternstyle.us/blog/float-vs-inline-block pour une comparaison détaillée, ainsi qu'une discussion des problèmes de compatibilité avec IE 7 et les versions antérieures.

    OriginalL'auteur Spudley

  2. 4

    Divs sont des éléments de niveau bloc, donc, par défaut, ils trouveront toujours une ligne entière. La façon de changer cela est de laisser flotter le divs:

    <div style="float: left"></div>
    Et pour commencer un prochain élément inline sur une nouvelle ligne, ajouter style="clear: both" à cet élément.
    OP dit: "j'ai besoin de l'autre div pour aller à la ligne suivante s'il n'y a pas assez de place" donc, dans ce cas, aucune compensation doit être utilisé. Que de bons conseils pour les autres situations.
    Désolé pour le unclarity; je voulais dire un élément de base, autres que le div en question. Probablement OP a plus de balisage au-delà de ceux-ci. 😉
    Ne serait pas inline-block être une meilleure solution? Les flotteurs ont tendance à être assez compliqué; la compensation des conteneurs, la prévention des problèmes avec d'autres flotteurs, en s'assurant de texte s'articule autour d'eux correctement...
    Voici une comparaison détaillée des deux méthodes: ternstyle.us/blog/float-vs-inline-block Il y a des avantages et des inconvénients de chaque. Pour moi, l'argument le plus convaincant est que IE 7 et les versions antérieures ne font pas affaire avec inline-block de façon appropriée. Je trouve souvent qu'il est plus facile de gérer les conséquences de flottant, de créer d'autres styles pour IE 7 et les versions antérieures.

    OriginalL'auteur George Cummins

  3. 2

    Utilisation float's et margin's; de cette façon quand il n'y a pas d'espace, vous pouvez simplement mettre overflow:hidden à la container de masquer le reste de la div au lieu de le faire passer à la ligne suivante.

    CSS

    .container {
  width:500px;
  background:#DADADA;
  overflow:hidden; /* also used as a clearfix */
}

.content {
  float:left;
  background:green;
  width:350px;
}
.sidebar {
  width:155px; /* Intentionaly has more width */ 
  margin-left:350px; /* Width of the content */
  background:lime;
}

    HTML

    <div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

    Dans cette démo, vous pouvez voir: flotteurs, en marge de+flotteurs, display:inline-block.

    Démo ici: http://jsfiddle.net/kuroir/UupbG/1/

    OriginalL'auteur MarioRicalde

  4. 0

    Vous devez utiliser float règle CSS. Suffit d'utiliser un peu de classe ou un identifiant et définir float à left ou right.

    OriginalL'auteur Matías Fidemraizer

  5. -2

    Assurez-vous que vous avez une largeur fixe à la divs

    OriginalL'auteur Ahmed Magdy