significado - span html

Dos elementos de 50% de ancho en línea y de bloque se envuelven en la segunda línea

Question

Esta pregunta ya tiene una respuesta aquí:

• Ignorar el espacio en blanco en HTML [duplicado] 12 respuestas

Me gustaría tener dos columnas de 50% de espacio libre y evitar flotadores. Así que pensé en usar display:inline-block .

Cuando los elementos se suman al ancho del 99% (por ejemplo, 50%, 49%, http://jsfiddle.net/XCDsu/2/ ) funciona como se esperaba.

Cuando se utiliza un ancho del 100% (por ejemplo, 50%, 50%, http://jsfiddle.net/XCDsu/3/ ) la segunda columna se divide en la segunda línea.

¿Porqué es eso?

Answer 1

NOTA: en 2016, probablemente puedas usar flexbox para resolver este problema más fácilmente.

Este método funciona correctamente IE7 + y todos los principales navegadores, ha sido probado en una serie de aplicaciones web complejas basadas en viewport.

<style>
    .container { 
    font-size:0}

    .column { 
    display: inline-block; 
    width: 50%; 
    font-size:1rem; /* IE9+ */
    }

    .ie7 .column {font-size:16px; display:inline; zoom:1}

    .ie8 .column {font-size:16px}

</style>

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Demostración en vivo: http://output.jsbin.com/sekeco/2

El único inconveniente de este método para IE7 / 8 es confiar en el body {font-size:??px} como base para el tamaño de fuente basado en em /%.

IE7 / IE8 CSS específico podría ser servido utilizando IE comentarios condicionales

Answer 2

Continué teniendo este problema en ie7 cuando el navegador tenía ciertos anchos. Desactiva los navegadores antiguos en torno al valor de píxel si el resultado porcentual no es un número entero. Para resolver esto puedes intentar configurar

overflow: hidden;

en el último elemento (o todos)

Answer 3

Es porque display:inline-block tiene en cuenta el espacio en blanco en el html. Si elimina el espacio en blanco entre los div ''s, funciona como se esperaba. Ejemplo en vivo: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Answer 4

Puede eliminar los espacios en blanco a través de css usando espacios en blanco para que pueda mantener su bonito diseño HTML. No olvide volver a establecer el espacio en blanco en normal si desea que su texto se envuelva dentro de las columnas.

Probado en IE9, Chrome 18, FF 12

.container { white-space: nowrap; }
.column { display: inline-block; width: 50%; white-space: normal; }

<div class="container">
  <div class="column">text that can wrap</div>
  <div class="column">text that can wrap</div>
</div>

Answer 5

inline y en inline-block se ven afectados por el espacio en blanco en el HTML.

La forma más sencilla de solucionar su problema es eliminar los espacios en blanco entre </div> y <div id="col2"> , consulte: http://jsfiddle.net/XCDsu/15/

Hay otras soluciones posibles, consulte: ¿alternativa a la propiedad de bikeshedding CSS3?