con tablas Puedo fácilmente tener una fila con 2 columnas, la columna 1 es de ancho variable y la columna 2 de ancho fijo en píxeles y la columna 1 cambia de tamaño para llenar el espacio disponible. Estoy haciendo la transición a css y me pregunto cómo hacer esto con css ... y me aseguro de que tanto los divs como las columnas permanezcan en la misma línea y no se envuelvan.css layout ancho fijo y ancho variable en la misma línea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; border: 0 none; }
#left { margin-right: 300px; background: yellow; }
#right { width: 300px; float: right; background: #ccc; }
</style>
</head>
<body>
<div id="wrapper">
<div id="right">Fixed</div>
<div id="left">Variable</div>
</div>
</body>
</html>
Tiene una columna derecha de 300 píxeles y una columna izquierda variable. El DOCTYPE está ahí para hacer que IE se porte mal. También se recomienda el uso de reset CSS.
Los flotadores con anchos explícitos son prácticamente la forma estándar de lograr esto hoy en día (debido a la limitación del diseño en CSS1/CSS2), también puede usar el bloque en línea pero terminaría siendo más trabajo. No olvides incluir los flotadores en el elemento primario con overflow: hidden y una propiedad que desencadena un diseño como el ancho.
¿Me puede dar algún ejemplo css. Recuerde que la columna 1 debe redimensionarse para ajustarse al espacio no utilizado por la columna de ancho fijo 2 y también se redimensiona cuando la página cambia de tamaño para que no se pueda fijar el ancho de ambas columnas. – Tuviah
Supongo que lo que necesita aquí es un diseño de página de 2 columnas. En teoría, podría usar display: table, pero si necesita soportar cualquier versión de IE, esa no es realmente una opción.
Esta es una de las cosas más difíciles que algunos de nosotros encontramos al cambiar de tablas a CSS, pero afortunadamente para usted, hemos estado haciendo esto por más de 5 años y creo que puede encontrar una solución para cada problema. Tal vez quiera consultar este artículo clásico: Faux Columns
Por favor, no se desanime, CSS solo es duro los primeros meses, y después de eso podrá diseñar cualquier cosa de una manera muy limpia, simple, semántica y forma estándar.
Esta herramienta ayuda a generate liquid fixed columns fácilmente.
Esto es bueno porque es CSS puro y fácil de ver lo que está pasando – Danon
HTML
<div class="wrapper">
<div class="fixed">fixed</div>
<div class="variable">variable</div>
</div>
CSS
.wrapper {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
justify-content: space-between;
}
.fixed {
min-width: 200px;
width: 200px;
}
.variable {
width: 100%;
}
Esto funcionó perfectamente para mí – Danon
Claramente no entiendo Flexbox lo suficiente, pero utilicé esto y eliminé todas las expectativas de visualización: ¡y todavía funcionó! –
Se ve bien pero debe ir a la columna de la izquierda después de la columna de la derecha. Eso parece confuso. También se puede hacer esto usando la posición absoluta y la derecha, si se hace, ¿no es mejor que usar flotadores y tener que restablecer el flotador? – Tuviah
Mi experiencia general con el posicionamiento absoluto es que tiende a crear otros problemas (p. Ej., Cambiar los valores del índice z para que un elemento absoluto flote sobre los menús). En este caso, puede hacer que la columna de la derecha sea absoluta o relativa + absoluta, pero la experiencia me hace preferir flotantes, incluso si los elementos están en el orden "incorrecto". No me preocuparía excesivamente con eso. – cletus
Este diseño es una buena solución, pero crea problemas cuando desea usar flotantes dentro de la sección de variables principales específicamente cuando desea usar clear: both; –