Intento construir un diseño fluido que el uso de porcentajes como anchos. Qué hacer, así que he intentado esto:

<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>

En ese caso, ellos no están en una línea, pero si puedo eliminar el salto de línea entre ellos, como este:

    <div style="width:50%; display:inline-table;">A</div><div style="width:50%;   display:inline-table;">B</div>

entonces funciona bien. Donde está el problema? ¿Cómo puedo hacer algo como eso, pero sin el uso de la posición absoluta y flotar.

p.s. lo siento por el inglés.
p.s.s. espero que bien explicar mi problema

InformationsquelleAutor Chris | 2012-05-22

9 Comentarios

  1. 74

    El problema es que cuando algo está en línea, todos los espacios en blanco se tratan como un espacio real. Así que va a influir en la amplitud de los elementos. Recomiendo el uso de float o display: inline-block. (Sólo no deje ningún espacio en blanco entre los divs).

    Aquí es un demo:

    CSS:

    div {
      background: red;
    }
    div + div {
      background: green;
    }

    HTML:

    <div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>

    • Genial, parece de trabajo. Pero, ¿por qué este código no necesita clara:después de tanto ??
    • luego upvote 😉 sólo flota necesita ser limpiado.
    • no funciona en IE7, por favor vea mi respuesta a h flota en su lugar 🙂
    • él era muy explícito en la pregunta. «¿Cómo puedo hacer algo como eso, pero sin el uso de la posición absoluta y flotante». +el diseño fluido costuras a ser bastante importante.
    • Lindo, pero si los divs tienen un borde o relleno no va a funcionar.
    • usted nunca oyó hablar de box-sizing: border-box ¿: D
    • ¿Por qué cuando uso Bootstrap, puedo poner el segundo div en la nueva línea?
    • ¿Por qué bootstrap ser diferentes? Su CSS, así, no es magia negra.

  2. 30

    El problema es que si usted tiene una nueva línea entre ellos en el HTML, entonces usted consigue un espacio entre ellos cuando se utiliza inline-table o inline-block

    50% + 50% + que el espacio > 100% y es por eso que el segundo uno termina por debajo de la primera

    Soluciones:

    <div></div><div></div>

    o

    <div>
    </div><div>
    </div>

    o

    <div></div><!--
    --><div></div>

    La idea es no tener ningún tipo de espacio entre el primer cierre de etiqueta div y la segunda apertura de la etiqueta div en el HTML.

    PS – yo también uso inline-block en lugar de inline-table para este

    • Golpeando mi cabeza contra una pared para el último par de horas. Gracias… la Solución 3 era y ahora que lo escribí yo lo veo así, en el ejemplo de código. Hay una escritura en cualquier lugar de esta pequeña situación?
    • ¿Por qué me encuentro que necesitan esta respuesta, de nuevo cada pocos meses… Ah, claro, porque es ignorante de que obras como esta!!!
    • Increíble. Gracias!
  3. 22

    Se envuelven alrededor de un div con el siguiente CSS

    .div_wrapper{
        white-space: nowrap;
    }
    • Excelente. El resultado más limpio.
    • Esto hace que el niño divs que aparecen a la derecha de la div padre para mí.
    • no es bueno si usted tiene 4 elementos con un 50% de ancho
  4. 21

    Dar este parent DIV font-size:0. Escribir como este:

    <div style="font-size:0">
      <div style="width:50%; display:inline-table;font-size:15px">A</div>
      <div style="width:50%; display:inline-table;font-size:15px">B</div>
    </div>
    • Para que se puede usar word-spacing:-1em; O letter-spacing:-1em; en lugar de font-size:0; 🙂
    • bueno +1 para esta
    • La em hack hace que el 2 divs ancho combinado < 100%.
  5. 13

    ¿Cómo puedo hacer algo como eso, pero sin el uso de la posición absoluta
    y flotar?

    Además de la utilización de la inline-block enfoque (como se ha mencionado en otras respuestas) aquí están algunos otros enfoques:

    1) CSS tablas (El VIOLÍN)

    CSS:

    .container {
      display: table;
      width: 100%;
    }
    .container div {
      display: table-cell;
    }

    HTML:

    <div class="container">
      <div>A</div>
      <div>B</div>
    </div>

    2) Flexbox (El VIOLÍN)

    CSS:

    .container {
      display: flex;
    }
    .container div {
      flex: 1;
    }

    HTML:

    <div class="container">
      <div>A</div>
      <div>B</div>
    </div>

    Para una referencia, este CSS-tricks post parece resumir los diferentes enfoques para lograr este.

    • La tabla/table-cell ejemplo funciona a la perfección
  6. 1
    <div id="wrapper" style="width: 400px">
        <div id="left" style="float: left; width: 200px;">Left</div>
        <div id="right" style="float: right; width: 200px;">Left</div>
        <div style="clear: both;"></div>
    </div>

    Sé que esta pregunta quería en línea bloque, pero intentar ver http://jsfiddle.net/N9mzE/1/ en IE 7 (la más antigua del navegador que donde yo trabajo). Los divs no son de lado a lado.

    OP dijo que él no quería hacer uso de flotadores, porque él no es como ellos. Bueno…en mi opinión, hacer buenas páginas web que no se ve raro en cualquiera de los navegadores debe ser el maingoal, y hacer esto mediante el uso de flotadores.

    Honestamente, puedo ver el problema. Los flotadores son fantásticos.

    • yo personalmente odio las carrozas y pensar inline-block es un limpiador mucho camino que recorrer.. no hay margen de ganancia adicional. Y usted puede hacer que funcione en IE: display:inline; zoom: 1; et voilà
  7. 0

    básicamente inline-table es para el elemento de la tabla, supongo que lo que realmente se necesita aquí es inline-block, si usted tiene que utilizar inline-table de todos modos, trate de esta manera:

    <div style="width:50%; display:inline-table;">A</div><!--
    --><div style="width:50%; display:inline-table;">B</div>
    • en línea bloque no cambia el problema, es el espacio en blanco, tan pronto que algo está en línea, cada espacio cuenta… es por eso que su truco con el comentario es bastante agradable, pero no estoy seguro de si esto funciona en IE
  8. 0

    Lo siento pero todas las respuestas que veo aquí son chapucero o fallar si estornuda un poco más difícil.

    Si utiliza una tabla, usted puede (si lo desea) agregar un espacio entre los divs, definición de los bordes, relleno…

    <table width="100%" cellspacing="0">
        <tr>
            <td style="width:50%;">A</td>
            <td style="width:50%;">B</td>            
        </tr>
    </table>

    Echa un ejemplo más completo aquí: http://jsfiddle.net/qPduw/5/

    • Cierto, pero también lo es el uso de tablas para maquetar, que están destinados a la estructura de datos.
  9. -1

    El problema que nos encontramos cuando ajuste de la anchura del 50% es el redondeo de subpíxeles. Si el ancho de su contenedor es decir, el 99 píxeles, una anchura de 50% puede resultar en 2 envases de 50 píxeles cada una.

    Con el flotador es probablemente más fácil, y no es una mala idea. Ver este pregunta para obtener más detalles sobre cómo solucionar el problema.

    Si usted no desea utilizar float, trate de usar un ancho de 49%. Esto funcionará cross-browser por lo que yo sé, pero no es de píxel perfecto..

    html:

    <div id="a">A</div>
    <div id="b">B</div>

    css:

    #a, #b {
        width: 49%;
        display: inline-block; 
    }
    #a {background-color: red;}
    #b {background-color: blue;}
    • eso no es el problema en absoluto. 50% siempre funciona. El problema es el whitepace…

Dejar respuesta

Please enter your comment!
Please enter your name here