Pregunta CSS min-width y max-width y diseño flexible


Necesito ayuda para construir un diseño html flexible. Definí el ancho mínimo y máximo de la página wrap. Dentro de wrapTengo dos columnas content y right.

Quiero tener ancho fijo right columna. Pero, quiero hacer que content ancho flexible, de modo que dependiendo de ancho mínimo y ancho máximo, su ancho debe aumentar o disminuir.

Aquí está mi estructura html:

<body>
    <div class="wrap">
        <div class="content">...</div>
        <div class="right">...</div>
    </div>
</body>

Aquí está CSS, estoy intentando:

.wrap{
    min-width: 780px;
    max-width: 1140px;
    margin: 10px auto;
}

.right{
    float:left
    width: 200px;   
}

.content{
    float: left;
    width: ?? //what should i do here?

}

5
2018-01-10 14:52


origen


Respuestas:


Al hacer columnas flotantes en CSS hay algunas cosas que aprender.

primero, el contenedor (en su caso .envolver) también debe ser autorizado para flotadores. Aquí hay una buena pregunta sobre Stackoverflow en "clearfix". "Clearfix-ing" asegurará que la altura del contenedor se estire para que coincida con la columna flotada más larga. Útil para hacer el diseño de "columnas falsas".

¿Qué métodos de 'clearfix' puedo usar?

Segundo, ¿es la necesidad de saber cuántas columnas estás buscando hacer? 2 columnas? 3 columnas?

Hay diferentes maneras de despellejar a ese gato. Puede hacer 2 columnas y luego subdividir una de esas columnas por otro diseño de 2 columnas. O puede poner 3 contenedores de bloques y flotar cada uno de ellos a un porcentaje del ancho total. Es decir. para un diseño de 3 columnas, teóricamente querrías que cada una tuviese 33.33% de ancho (dependiendo de cómo quieras hacer cunetas o márgenes).

Tercero, hablas de "diseño flexible". Bueno, un diseño flexible no puede funcionar con el ancho de píxel, ya que los píxeles son valores estáticos. Es decir. Si dice que el ancho es 200px, siempre es 200px, no importa cuán grande o pequeño sea su contenedor o ventana.

Lo que hay que hacer es usar porcentajes. Por supuesto, para hacer un diseño flexible correcto, debe tener una dimensión base. Por lo tanto, debe tener un diseño fijo que diga que es su "diseño óptimo" (tengo que usar ese término sin apretar ya que un diseño realmente flexible y receptivo debería verse bien en su mayor parte).

Entonces, digamos que su diseño está configurado para tener el área de contenido principal .envolver ser 1000px. Desea un diseño de 2 columnas utilizando la proporción de oro. http://en.wikipedia.org/wiki/Golden_ratio

Básicamente, usted desea que una columna sea de 618px y la otra de 1000px - 618px = 382px.

Para CSS, entonces desea establecerlos en términos de porcentajes. Para obtener el porcentaje, toma el ancho principal y divídelo por el ancho que desee.

618px / 1000px = .618 * 100 (para porcentaje) = 61.8%

382px / 1000px = .382 * 100 (para porcentaje) = 38.2%

.left {
    float: left;
    width: 61.8%
}

.right {
    float: right;
    width: 38.2%
}

Joseph Silber tiene razón, tú no necesitar para hacer flotar la columna de la derecha, pero no hacerlo puede causar otros problemas inesperados de cómo el modelo de caja actúa y se envuelve alrededor del artículo flotante izquierdo, especialmente si uno es más corto que el otro.

Puede aplicar un margen para compensar una columna con el ancho de otras columnas, pero creo que es complicado y todavía podría haber problemas con las implementaciones de CSS deficientes en los navegadores (aunque digo que ya no soporto IE6, sigue siendo utilizado por nuestros visitantes lo suficiente como para necesitarlo).

También tenga en cuenta que cuando se trata de% es que se encuentra con errores de redondeo. Algunos navegadores redondean hacia abajo o hacia arriba cuando alcanzan ".5%". Esto puede hacer que sus columnas flotantes se envuelvan porque se vuelve 1px más grande que el elemento contenedor. Entonces, para estar seguro, probablemente querrá afeitarse un poco para darle un búfer de 1-2 píxeles para envolver.

Un enfoque común es dar un margen o margen "vacío" entre la columna izquierda y derecha de, por ejemplo, 10px. Y 10px en nuestro diseño es:

10px / 1000px = 0.01 * 100 (porcentual) = 1%

Ahora puede tomar 0.5% de descuento en cada columna o tomar un 1% de descuento en una columna. Haré lo más tarde.

.left {
    float: left;
    width: 60.8% /* removed 1% to give a gutter between columns */
}

.right {
    float: right;
    width: 38.2%
}

Esto ahora le proporciona una buena zona de seguridad y evitará errores de redondeo.

Además, ahora que estamos trabajando en%, el diseño será fluido. Tus 2 columnas cambiarán de tamaño con tu navegador hasta que alcances el valor de píxel mínimo / máximo.

Además, no te olvides de "borrar"

<div class="wrap clearfix">

    <div class="left">
        <!-- content -->
    </div>

    <div class="right">
        <!-- content -->
    </div>

</div>

Hay, por supuesto, muchas otras consideraciones a tener en cuenta cuando se trata de redes fluidas / flexibles.

Una cosa que puedes hacer es no volver a crear la rueda sino usar un marco CSS como Yahoo! o Blueprint. Creo que tienen estos incorporados y han sido probados de manera robusta.

Además, recomiendo leer sobre Responsive Web Design. Hay un artículo de A List Apart sobre él: http://www.alistapart.com/articles/responsive-web-design/ así como un libro escrito por Ethan Marcotte (el otro del artículo y publicado por el sitio web de ALA) que es una gran lectura.

El único inconveniente real del libro es que no cubría los inconvenientes de un diseño receptivo y de cómo, a pesar del factor "genial", muchos diseñadores / desarrolladores web de renombre han elegido seguir utilizando un diseño de sitio web móvil / de escritorio por separado.

Lo cual es algo fuera de tema, ya que la pregunta original solo hablaba de un diseño fluido y no de un tamaño objetivo de medios.

¡Espero que ayude!

¡Aclamaciones!


10
2018-01-10 15:38



HTML:

<body>
    <div class="wrap">
        <div class="right">...</div>
        <div class="content">...</div>
    </div>
</body>

CSS:

.right {
    float: right;
    width: 200px;   
}

.content {
    padding-right: 200px; /* or margin */
    /* No need to float this */
}

3
2018-01-10 14:53