Expande div al ancho máximo cuando flota: se establece la izquierda
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo algo así:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
ambos flotadores son necesarios. Quiero que el div de contenido llene toda la pantalla menos esos 100 px para el menú. Si no uso float, el div se expande exactamente como debería. Pero, ¿cómo configuro esto cuando se establece el flotador? Si uso algo como
style=width:100%
entonces el contenido div obtiene el tamaño del padre, que es el cuerpo u otro div que también probé, por lo que, por supuesto, no se ajusta a la derecha del menú y se muestra a continuación.
Solución
Espero haberte entendido correctamente, mira esto: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
Otros consejos
La forma más compatible que he encontrado de hacer esto no es muy obvia. Debe eliminar el flotador de la segunda columna y aplicarle overflow: hidden . Aunque esto parece estar ocultando cualquier contenido que salga del div, en realidad lo obliga a permanecer dentro de su padre.
Usando su código, este es un ejemplo de cómo se podría hacer:
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
Espero que esto sea útil para cualquiera que tenga este problema, es lo que encontré que funciona mejor para el sitio que estaba construyendo, después de tratar de ajustarlo a otras resoluciones. Desafortunadamente, esto no funciona si incluye un div flotante a la derecha después del contenido también, si alguien sabe una buena manera de hacerlo funcionar, con una buena compatibilidad con IE, estaría muy feliz de escucharlo.
Nueva opción, mejor usando display: flex;
Ahora que el modelo Flexbox está bastante implementado, en realidad recomendaría usarlo, ya que permite mucha más flex ibilidad con el diseño. Aquí hay una columna simple de dos columnas como la original:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
¡Y aquí hay una columna de tres columnas con una columna central de ancho flexible!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
Solución sin fijar el tamaño en su margen
.content .right{
overflow: auto;
background-color: red;
}
+1 para Merkuro, pero si el tamaño del flotador cambia, su margen fijo fallará.
Si usa el CSS anterior en el div derecho, cambiará muy bien el tamaño al cambiar el tamaño en el flotador izquierdo. Es un poco más flexible así.
Verifique el violín aquí: http://jsfiddle.net/9ZHBK/144/
Los elementos que flotan se sacan del diseño de flujo normal y los elementos de bloque, como los DIV, ya no abarcan el ancho de sus padres. Las reglas cambian en esta situación. En lugar de reinventar la rueda, consulte este sitio para encontrar algunas posibles soluciones para crear el diseño de dos columnas que busca: http://www.maxdesign.com.au/presentation/page_layouts/
Específicamente, el " diseño de dos columnas líquidas " ;.
¡Salud!
Esta es una solución actualizada para HTML 5 si alguien está interesado & amp; no le gusta "flotante".
La tabla funciona muy bien en este caso, ya que puede establecer el ancho fijo para la tabla & amp; Celda de mesa.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ código fuente original de @merkuro
este uso puede resolver su problema.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
Y basado en la solución de merkuro , si desea maximizar el de la izquierda, debe usar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
No se ha probado en IE, por lo que puede verse roto en IE.
La respuesta aceptada podría funcionar, pero no me gusta la idea de superponer márgenes. En HTML5, haría esto con display: flex; . Es una solución limpia. Simplemente configure el ancho para un elemento y flex-grow: 1; para el elemento dinámico. Una versión editada de merkuros fiddle: https://jsfiddle.net/EAEKc/1499/
Hola, hay una manera fácil con el método oculto de desbordamiento en el elemento correcto.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>
Esto podría funcionar:
div{
display:inline-block;
width:100%;
float:left;
}
