Yo quiero una de dos columnas div de diseño, donde cada uno puede tener de ancho variable, por ejemplo,

CSS:

div {
    float: left;
}
.second {
    background: #ccc;
}

HTML:

<div>Tree</div>
<div class="second">View</div>

Quiero que el ‘punto de vista’ div, para que se expanda a todo el ancho disponible después de ‘árbol’ div ha llenado el espacio necesario.
Actualmente mi ‘ver’ div cambia de tamaño para el contenido que contiene
También será bueno si ambos divs ocupan toda la altura

No duplicar descargo de responsabilidad:

Ampliar div ancho máximo cuando float:left se establece
porque el de la izquierda tiene un ancho fijo.

Ayuda con div – hacer div ajuste el ancho restante
porque tengo dos columnas de ambos alineados a la izquierda

  • relacionados con la stackoverflow.com/a/22719552/759452
  • Bien, no entiendo la pregunta o no entiendo cómo elegir el aceptado la respuesta, porque hay tanto anchos y alturas se fija con el inconveniente de overflow hidden

21 Comentarios

  1. 978

    La solución a esto es realmente muy fácil, pero no en todos obvio. Usted tiene que desencadenar algo llamado «bloque de formato contexto» (BFC), que interactúa con la flota en una manera específica.

    Acaba de tomar la segunda div, quitar el flotador, y darle overflow:hidden lugar. Cualquier valor de desbordamiento otros que visible hace que el bloque está establecido en convertirse en una de BFC. BFCs no permitir descendiente flotadores para escapar de ellos, ni tampoco permitir que sus hermanos/antepasado flota a inmiscuirse en ellos. El efecto neto es que el div flotante va a hacer su cosa, entonces el segundo div será un bloque común y corriente, teniendo disponible el ancho de excepto la ocupada por el flotador.

    Esto debería funcionar en todos los navegadores actuales, aunque usted puede tener para desencadenar hasLayout en IE6 y 7. No puedo recordar.

    Demos:

    • Parece que funciona en IE 9 del IE 7 modo de compatibilidad sin hasLayout así que supongo que en IE 7 no requiere hasLayout.
    • Excelente respuesta! Pero te equivocas cuando dices que «cualquier desbordamiento valor distinto de auto» va a hacer una BFC. Lo que quieres decir es que cualquier desbordamiento valor distinto de la por defecto (visible) de un BFC. De hecho, el desbordamiento automático funciona perfectamente demasiado – eso es lo que yo recomendaría (sólo en caso de que no tienen los elementos en posición relativa que podría salir de ese div).
    • Este artículo tiene una buena explicación: colinaarts.com/articles/the-magic-of-overflow-hidden
    • Lo que si el contenido es lo suficientemente grande como para inundar el div ?
    • No funciona en IE6 sin la hasLayout cosa, como se señaló. La adición de zoom:1 trabajó para mí.
    • aquí está el jsfiddle: jsfiddle.net/qLTMf/1071
    • Esto no funciona en Firefox o Chrome con ninguno div elementos establecidos en display:block.
    • buena respuesta. pero ¿por qué no el mismo principio es válido para «float: right»?
    • Es válido, si por eso te quiere decir «¿puedo usar float:derecho de la barra lateral en su lugar?». Totalmente todavía funciona. Si te refieres a «¿por qué no puedo usar float:right para el área principal», es por la misma razón float:left no funciona – shrinkwraps el contenido.
    • Yo bifurcada en su jsfiddle para crear otra pregunta. ¿Cómo se puede expandir una entrada para tomar el ancho restante? stackoverflow.com/questions/26106659/…
    • Puede esta técnica varias veces anidados?
    • El «derecho fijo» fiddle » debe tener «.contenedor { width:100%; … con el fin de mostrar toda su frescura.
    • Si me tome todo el css de .left otros que height, todavía tiene todos los restantes ancho. Si me cambio de display a otra cosa que block no funciona. (Firefox 34.0)
    • Gran solución! Pero en la primera jsfiddle el div que es en realidad la muestra de la izquierda tiene la clase de «derecho» y al revés.
    • Ningún desbordamiento necesaria, Sólo tienes que poner la variable longitud de div en el pasado (por lo que será calculada por último). Consulte jsfiddle.net/wangzhihao/A8zLY/2258
    • Incorrecto. Sin ‘desbordamiento’ (o algún otro medio de la activación de un BFC), la variable de longitud div no «evitar» el otro div. Su texto se evite la flotaba divs, pero su fondo/frontera/etc abarcará ellos, que probablemente no es lo que quería.
    • Es importante señalar, que el orden de los hijos de los asuntos. El elemento flotante con ancho fijo tiene que estar por encima de la otra. Me tomó demasiado tiempo para averiguar, por qué no funcionó para mí con conmutación de orden.
    • Escribí una respuesta explicando por qué no visibles desbordamiento de todas las cosas, se desencadena una BFC, según las respuestas dadas por David y Boris, que se puede encontrar aquí: stackoverflow.com/questions/9943503/… Fue mi interpretación correcta?
    • Es allí una manera de hacer ambas columnas siempre de la misma altura y valign el contenido? jsfiddle.net/A8zLY/3334
    • Sí, el uso de Flexbox. Carrozas fueron nunca fue la intención de este tipo de diseño, solo se requiere hack antes de Flexbox (y ahora de la Cuadrícula) existía para hacerlo correctamente.
    • el «fijo a la izquierda» el violín tiene la .cuadro de la izquierda a la derecha y a la .cuadro de la derecha a la izquierda, lo cual es bastante confuso al principio. 😛
    • cuando la parte flexible es una entrada, no va a funcionar, incluso cuando la configuración de display:block, alguna idea?
    • Actualizado un ajuste en su violín el uso de la caja flexible, que le permite tener este comportamiento sin tener que especificar el ancho exacto: jsfiddle.net/xseoa9rk
    • Gran noticia, gracias por el heads-up/recordatorio en flex-grow!
    • El enlace de «la magia de desbordamiento» ya no es válido, el nuevo es colinaarts-com.herokuapp.com/articles/…

  2. 84

    Acabo de descubrir la magia de flex cajas (display: flex). Intente esto:

    <style>
      #box {
        display: flex;
      }
      #b {
        flex-grow: 100;
        border: 1px solid green;
      }
    </style>
    <div id='box'>
     <div id='a'>Tree</div>
     <div id='b'>View</div>
    </div>

    Flex cajas me dan el control he querido css tenía 15 años. Su finalmente aquí! Más info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    • No sé lo que has descubierto, pero el código no funciona en el más reciente de Chrome jsfiddle.net/fjb548kw/3
    • He quitado el «float:left;» para solucionar el problema. Gracias por la nota!
    • Gracias. ¿Puede por favor explicar por qué flex-grow: 100; en lugar de flex-grow: 1;?
    • Sin ninguna razón en particular, excepto que es como me gusta hacerlo. Esto me permite pensar en porcentajes por lo que si podía hacer algo como #un a flex-grow:10 y, a continuación, me gustaría set #b a flex-grow: 90 así que #un 10% de la línea de ancho y #b sería el 90% de la línea de ancho. Si no hay otros elementos que tienen un flex ancho del estilo, entonces no técnicamente no importa lo que pones.
  3. 26

    Este sería un buen ejemplo de algo que es trivial hacer con tablas y difícil (si no imposible, al menos en un cross-browser sentido) a hacer con CSS.

    Si las columnas eran de ancho fijo, esto sería fácil.

    Si una de las columnas fue de ancho fijo, esto sería un poco más difícil, pero totalmente factible.

    Con dos columnas de ancho variable, en mi humilde opinión que simplemente por la necesidad de utilizar una tabla de dos columnas.

    • Tabla no ser muy buena en un diseño de respuesta donde desea que la columna de la derecha para deslizarse por debajo de la izquierda en dispositivos pequeños, aunque.
    • Hay algunos que responden trucos de diseño para trabajar con tablas: css-tricks.com/responsive-data-tables
    • Me tienden ahora a menudo el diseño de dos diseños separados completamente y el cambio en un móvil a través de consultas de medios de comunicación y display:none; Mientras que haciendo tanto como sea posible el 100% responden en una escala que a veces es mejor cambiar el diseño completo de un móvil haciendo uso de la pantalla táctil de sentir y de estilo de botón.
  4. 21

    Comprobar esta solución

    CSS:

    .container {
      width: 100%;
      height: 200px;
      background-color: green;
    }
    .sidebar {
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
    .content {
      background-color: red;
      height: 200px;
      width: auto;
      margin-left: 200px;
    }
    .item {
      width: 25%;
      background-color: blue;
      float: left;
      color: white;
    }
    .clearfix {
      clear: both;
    }

    HTML:

    <div class="container">
      <div class="clearfix"></div>
      <div class="sidebar">width: 200px</div>
    
      <div class="content">
        <div class="item">25%</div>
        <div class="item">25%</div>
        <div class="item">25%</div>
        <div class="item">25%</div>
      </div>
    </div>

    • Esto es generalmente una solución superior debido a la clandestinidad de desbordamiento no es siempre la deseada.
    • Al OP: «yo quiero una de dos columnas div de diseño, donde cada uno puede tener un ancho variable». En su respuesta, usted tiene que saber el ancho de la primera columna, por lo que no es variable. Así podría conjunto de ancho fijo en ambas columnas y simplemente flotar.
  5. 15

    Aquí, esto podría ayudar…

    HTML:

    <html>
    
    <head>
      <style type="text/css">
        div.box {
          background: #EEE;
          height: 100px;
          width: 500px;
        }
        div.left {
          background: #999;
          float: left;
          height: 100%;
          width: auto;
        }
        div.right {
          background: #666;
          height: 100%;
        }
        div.clear {
          clear: both;
          height: 1px;
          overflow: hidden;
          font-size: 0pt;
          margin-top: -1px;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        <div class="left">Tree</div>
        <div class="right">View</div>
        <div class="clear" />
      </div>
    </body>
    
    </html>

    • +1 porque su ejemplo parece funcionar, pero en mi verdadero escenario de algunos de los contenidos de ‘ver’ la fluencia en el ‘árbol’ div, como el árbol div no es 100%, puede ser algo de javascript obliga a ser pequeña y después la altura de un árbol, veo a ver el contenido
    • En ese caso, si conoces el ancho máximo de la columna de la izquierda, u puede darle un estilo max-width (no funciona en IE) o de pensar de la margen izquierda (cuidado con los doble-margen de error en IE) o padding-left.
    • Este fue genial! Lo estoy usando en línea, como una solución: <div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>
  6. 14

    Flexbox solución

    Esto es lo que el flex-grow propiedad.

    CSS:

    html, body {
      height: 100%;
    }
    .wrapper {
      display: flex;
      height: 100%;
    }
    .second {
      flex-grow: 1;
    }

    HTML:

    <div class="wrapper">
      <div style="background: #bef;">Tree</div>
      <div class="second" style="background: #faa;">View</div>
    </div>

    Nota: Agregar flex proveedor de prefijos si es requerido por su navegadores compatibles.

  7. 13

    Uso calc:

    CSS:

    .leftSide {
      float: left;
      width: 50px;
      background-color: green;
    }
    .rightSide {
      float: left;
      width: calc(100% - 50px);
      background-color: red;
    }

    HTML:

    <div style="width:200px">
      <div class="leftSide">a</div>
      <div class="rightSide">b</div>
    </div>

    El problema con esto es que todos los anchos, deben definirse explícitamente, ya sea como un valor(px y me funciona bien), o como un porcentaje de algo definido explícitamente en sí.

    • la mejor solución cuando la primera columna tiene su ancho fijo. +1
  8. 5

    No entiendo por qué la gente está dispuesta a trabajar duro para encontrar un puro CSS solución para columnar simple diseños que son TAN FÁCILES de usar el antiguo TABLE etiqueta.

    Todos los Navegadores todavía tiene el diseño de la tabla lógica… me Llaman un dinosaurio tal vez, pero yo digo que es ayudar.

    HTML:

    <table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
      <tr>
        <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
        <td bgcolor="#F0F0F0">View</td>
      </tr>
    </table>

    Mucho menos riesgosa en términos de compatibilidad con los distintos navegadores también.

    • sí, pero si todo lo que se está haciendo por css ¿por qué no esta, al menos, una curiosidad si es que possble?
    • Esto es porque si usted quiere poner media-queries poner dos columnas una encima de la otra en dispositivos pequeños, es imposible que con la edad table etiqueta. Para que esto funcione, es necesario aplicar CSS estilos de tabla. Así, para hoy en día es mejor para resolver este con CSS si desea un diseño sensible para cualquier tamaño de pantalla.
  9. 3

    HTML:

    <html>
    
    <head>
      <style type="text/css">
        div.box {
          background: #EEE;
          height: 100px;
          width: 500px;
        }
        div.left {
          background: #999;
          float: left;
          height: 100%;
          width: auto;
        }
        div.right {
          background: #666;
          height: 100%;
        }
        div.clear {
          clear: both;
          height: 1px;
          overflow: hidden;
          font-size: 0pt;
          margin-top: -1px;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        <div class="left">Tree</div>
        <div class="right">View</div>
        <div class="right">View</div>
        <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
        <div class="clear" />
      </div>
      <div class="ColumnWrapper">
        <div class="Colum­nOne­Half">Tree</div>
        <div class="Colum­nOne­Half">View</div>
      </div>
    
    </body>
    
    </html>

    • Quiero algo como una barra de estado con elementos fijos de la izquierda, fija los elementos a la derecha y un mensaje de la línea que utiliza todos los de la izquierda sobre el espacio. Empecé con esta respuesta y añadió mi mensaje div DESPUÉS de que la flota con: height: 20px; white-space: nowrap; overflow: hidden; text-overflow:clip
  10. 3

    Puede intentar CSS Diseño de Cuadrícula.

    CSS:

    dl {
      display: grid;
      grid-template-columns: max-content auto;
    }
    
    dt {
      grid-column: 1;
    }
    
    dd {
      grid-column: 2;
      margin: 0;
      background-color: #ccc;
    }

    HTML:

    <dl>
      <dt>lorem ipsum</dt>
      <dd>dolor sit amet</dd>
      <dt>carpe</dt>
      <dd>diem</dd>
    </dl>

  11. 1

    Gracias por el enchufe de Sencillo.css!

    recordar a envolver todos sus columnas en ColumnWrapper como así.

    <div class="ColumnWrapper">
        <div class="Colum­nOne­Half">Tree</div>
        <div class="Colum­nOne­Half">View</div>
    </div>

    Estoy a punto de liberar la versión 1.0 de Sencillo.css para ayudar a difundir la palabra!

  12. 1

    Pat – estás en lo correcto. Es por eso que esta solución podría satisfacer tanto los «dinosaurios» y contemporáneos. 🙂

    CSS:

    .btnCont {
      display: table-layout;
      width: 500px;
    }
    
    .txtCont {
      display: table-cell;
      width: 70%;
      max-width: 80%;
      min-width: 20%;
    }
    
    .subCont {
      display: table-cell;
      width: 30%;
      max-width: 80%;
      min-width: 20%;
    }

    HTML:

    <div class="btnCont">
      <div class="txtCont">
        Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
      </div>
      <div class="subCont">
        This column as well as the entire container works like a table. Isn't Amazing!!!
      </div>
    </div>

    • No hay ninguna referencia html para la clase css .ip y no funciona en IE7
  13. 1

    flex-grow – Esto es lo que define la capacidad de un flex elemento a crecer si es necesario. Se acepta una radio sin unidades valor que sirve como una proporción. Se determina qué cantidad de espacio disponible en el interior del contenedor flex el elemento debe tomar.

    Si todos los elementos tienen flex-grow establece en 1, el espacio restante en el recipiente será distribuido en partes iguales a todos los niños. Si uno de los niños tiene un valor de 2, el resto del espacio que tomar hasta dos veces más espacio que los demás (o lo intentará, al menos). Ver más aquí

    CSS:

    .parent {
      display: flex;
    }
    
    .child {
      flex-grow: 1; // It accepts a unitless value that serves as a proportion
    }
    
    .left {
      background: red;
    }
    
    .right {
      background: green;
    }

    HTML:

    <div class="parent"> 
      <div class="child left">
          Left 50%
      </div>
       <div class="child right">
          Right 50%
      </div>
    </div>

  14. 0

    No estoy seguro si esta es la respuesta que están esperando, pero, ¿por qué no establecer el ancho de Árbol ‘auto’ y la anchura de ‘Ver’ al 100% ?

    • Debido a que le ponga el segundo flotador debajo de la primera, porque es demasiado amplia.
  15. 0

    Echar un vistazo a la disposición de diseño CSS marcos. Yo recomendaría Sencillo o, el más complejo, Plan marco.

    Si usted está usando Sencillo (que implica la importación de sólo uno sencillo.css archivo), usted puede hacer esto:

    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>

    para un 50-50 de diseño, o :

    <div class="Colum­nOne­Quarter">Tree</div>
    <div class="Colum­nThreeQuarters">View</div>

    para un 25-75 uno.

    Es así de simple.

    • ambos columnas de ancho variable?
  16. 0

    Escribí una función de javascript que me llaman de jQuery $(document).ready(). Esto va a analizar todos los niños de el div padre y sólo actualizar el derecho de la mayoría de los niños.

    html

    ...
    <div class="stretch">
    <div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
    </div>
    <div class="underline" style="display: inline-block;">Some other text
    </div>
    </div>
    ....

    javascript

    $(document).ready(function(){
        stretchDivs();
    });
    
    function stretchDivs() {
        //loop thru each <div> that has class='stretch'
        $("div.stretch").each(function(){
            //get the inner width of this <div> that has class='stretch'
            var totalW = parseInt($(this).css("width"));
            //loop thru each child node
            $(this).children().each(function(){
                //subtract the margins, borders and padding
                totalW -= (parseInt($(this).css("margin-left")) 
                         + parseInt($(this).css("border-left-width")) 
                         + parseInt($(this).css("padding-left"))
                         + parseInt($(this).css("margin-right")) 
                         + parseInt($(this).css("border-right-width")) 
                         + parseInt($(this).css("padding-right")));
                //if this is the last child, we can set its width
                if ($(this).is(":last-child")) {
                    $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
                } else {
                    //this is not the last child, so subtract its width too
                    totalW -= parseInt($(this).css("width"));
                }
            });
        });
    }
  17. 0

    Puede utilizar W3 del CSS de la biblioteca que contiene una clase llamada rest que hace precisamente eso:

    HTML:

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
    <div class="w3-row">
      <div class="w3-col " style="width:150px">
        <p>150px</p>
      </div>
      <div class="w3-rest w3-green">
        <p>w3-rest</p>
      </div>
    </div>

    No olvides enlazar la CSS de la biblioteca en la página del header:

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    Aquí está el demo oficial: W3 Escuela Tryit Editor

  18. 0

    Esto es bastante fácil de usar flexbox. Véase el siguiente fragmento. He añadido un contenedor contenedor para el flujo de control y establecer un global de altura. Las fronteras se han añadido también para identificar los elementos. Observe que divs ahora expanda a toda la altura, como se requiere.
    Proveedor de prefijos deben ser utilizados para flexbox en un escenario real ya que aún no es totalmente compatible.

    He desarrollado una herramienta gratuita para comprender y diseños utilizando flexbox. Échale un vistazo aquí:
    http://algid.com/Flex-Designer

    CSS:

    .container{
        height:180px;
        border:3px solid #00f;
        display:flex;
        align-items:stretch;
    }
    div {
        display:flex;
        border:3px solid #0f0;
    }
    .second {
        display:flex;
        flex-grow:1;
        border:3px solid #f00;
    }

    HTML:

    <div class="container">
        <div>Tree</div>
        <div class="second">View</div>
    </div>

    • has leído TODAS las respuestas anteriores antes de añadir el tuyo? parece que no …
    • como una nota del lado, no es necesario agregar stretch porque es el valor predeterminado y no hay necesidad de hacer que el niño elemento contenedor flex para display:flex es inútil para los elementos internos
    • Me pregunto por qué la downvote, sin ningún comentario. No es esta respuesta responder a la pregunta? Por qué? Si tratando de ayudar a los demás es penalizado voy a pensar dos veces antes de mi próxima respuesta,
    • tienes dos comentarios después de la downvote, no es suficiente?
    • Temari, ¿usted echa un vistazo a mi herramienta? No crees que es útil y puede ayudar a los demás? ¿Crees que no está relacionado con la pregunta? Dónde está tu respuesta a esta pregunta? Yo no lo puede ver. ¿Cuál es tu papel aquí?
    • lo siento, pero la respuesta es que no se dedica a promover propias herramientas, la respuesta debe responder a la pregunta, y realmente la flexbox respuesta está ya dos veces aquí, así que no hay necesidad de repetirlo
    • La herramienta gratuita es uno de los motivos, entre otros que me hacen downvote esta pregunta y me dio esas razones, si usted quiere ignorar ellos son libres … su respuesta es proporcionado ya dos veces, así que ni siquiera comprobar las respuestas anteriores y el código contiene las cosas inútiles. Yo podría haber votada abajo y dejar sin añadir ningún comentario, pero hice el esfuerzo para hacerlo porque me preocupo por la calidad del sitio.

  19. -3

    Si ambos de los anchos son de longitud variable, ¿por qué no calcular el ancho con algunas secuencias de comandos de servidor o de lado?

    <div style="width: <=% getTreeWidth() %>">Tree</div>

    <div style="width: <=% getViewWidth() %>">View</div>
    • ¿Cómo funciona el servidor de saber cómo el cliente diseño del motor va a trabajar?
    • Simple: desarrollar el 90% de los navegadores por ahí 🙂 IE 7+ , FF3+ y Safari de soporte de CSS 3. También se podría incluir el estándar IE6 <!–[if lte IE 6]> elemento. Por cierto, ¿qué navegador no soporta style=»width: %» ??
    • No sé cómo se puede hacer del lado de servidor, pero sí algo de javascript puede hacerlo pero quiero evitarlo a menos de css/html no puede hacerlo
    • Que no se puede. Por lo tanto, si usted quiere ser dinámico, a continuación, usted tiene que hacerlo en cualquiera de secuencia de comandos o el lado del servidor.

Dejar respuesta

Please enter your comment!
Please enter your name here