Dos divs uno además del otro sin envoltura

Question

Estoy buscando una manera elegante de colocar dos divs uno junto al otro sin envoltura de línea. El primer div es un icono, el segundo es un texto de tamaño desconocido.

No deben romperse en dos líneas, pero ocultarse si no hay espacio suficiente. Estoy intentando con esto example, pero no funciona.

Hay un question similar, pero no es el mismo escenario ya que se desconoce su tamaño.

ayuda se agradece

Answer 1

escribe así:

.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; 
} 

Marque esta http://jsfiddle.net/xcSXA/5/

Answer 2

creo, el siguiente CSS es, lo que necesita.

.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 3

float: left no le da, lo que necesita.
Trate display: inline

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

Answer 4

En lugar de flotar su divs, los muestra como inline-block para que no se envuelven. Además, establezca el estilo de "espacio en blanco" del contenedor en "nowrap" para evitar también el ajuste de línea.

HTML

<div class="container"> 
    <div class="d1">icon</div> 
    <div class="d2">This can be very very very very large.</div> 
</div> 

CSS

.container { 
    white-space:nowrap; 
    overflow:hidden; 
    width: 100px; 
} 

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

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

Ejemplo de trabajo:http://jsfiddle.net/C4Wfa/

Answer 5

Puede intentarlo con

float: left;

y crear un div exterior con este estilo:

height: 1%; overflow: hidden;

Ver aquí: 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

Answer 6

.D1 y .D2 usted tiene que dar un cierto ancho, pero debes asegurarte de que el ancho de ambos .d1 y .d2 juntos (+ márgenes y rellenos) no es más grande que la clase contenedor, de lo contrario no podrán se ponen uno al lado del otro.