Deux divs l'un à côté de l'autre sans enveloppement

Question

Je cherche un moyen élégant de positionner deux divs l'un à côté de l'autre sans retour à la ligne. La première div est une icône et la seconde un texte de taille inconnue.

Ils ne doivent pas se briser en deux lignes mais se cacher s'il n'y a pas assez de place. J'essaie avec ceci exemple mais ça ne marche pas.

Il y a aussi un pregunta mais ce n'est pas le même scénario car la taille est inconnue.

Toute aide est la bienvenue

Answer 1

Ecris comme ça :

.container {
  white-space: nowrap;
}
.d1,
.d2{
    display: inline-block;
    *display:inline;/*for IE 7 */
    *zoom:1;/*for IE 7 */
    vertical-align:top;
}
.d1 {            
    background-color:#ff0;
}

.d2 {
    background-color:red;
}

Vérifiez ceci http://jsfiddle.net/xcSXA/5/

Answer 2

float: left ne vous donne pas, ce dont vous avez besoin.
Essayez display: inline

http://jsfiddle.net/xcSXA/3/

Answer 3

Je pense que le CSS suivant est ce dont vous avez besoin.

.container {
  display:inline-block;
  overflow:hidden;
  white-space: nowrap;
}

.d1 {
  display: inline-block;
  background-color:#ff0;
}

.d2 {
  white-space: nowrap;
  display: inline-block;
  background-color:red;
}

Answer 4

.d1 et .d2 vous devez donner une certaine largeur, mais vous devez vous assurer que la largeur des deux .d1 et .d2 ensemble (+ marges et paddings) n'est pas plus grande que la classe du conteneur, sinon ils ne pourront pas être placés l'un à côté de l'autre.

Answer 5

Vous pouvez l'essayer avec

float: left;

et créer un div externe avec ce style :

height: 1%; overflow: hidden;

Voir ici : http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50