texto - span html significado
¿Cómo hacer que un div llene un espacio horizontal restante? (23)
Tengo 2 divs: uno en el lado izquierdo y otro en el lado derecho de mi página. El que está en el lado izquierdo tiene un ancho fijo y quiero que el lado derecho llene el espacio restante.
#search {
width: 160px;
height: 25px;
float: left;
background-color: #ffffff;
}
#navigation {
width: 780px;
float: left;
background-color: #A53030;
}
<div id="search">Text</div>
<div id="navigation">Navigation</div>
¡Tengo una solución muy simple para esto! // HTML
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
// CSS
#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}
Enlace: http://jsfiddle.net/MHeqG/
/ * * css * /
#search {
position: absolute;
width: 100px;
}
.right-wrapper {
display: table;
width: 100%;
padding-left:100px;
}
.right-wrapper #navigation {
display: table-cell;
background-color: #A53030;
}
/ * * html * /
<div id="search"></div>
<div class="right-wrapper">
<div id="navigation"></div>
</div>
Aquí hay una pequeña solución para la solución aceptada, que evita que la columna derecha caiga debajo de la columna izquierda. width: 100%; reemplazado width: 100%; con overflow: hidden; Una solución difícil, si alguien no lo supiera.
<html>
<head>
<title>This is My Page''s Title</title>
<style type="text/css">
#left {
float: left;
width: 180px;
background-color: #ff0000;
}
#right {
overflow: hidden;
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
http://jsfiddle.net/MHeqG/2600/
[editar] También puedes ver un ejemplo para el diseño de tres columnas: http://jsfiddle.net/MHeqG/3148/
Dado que esta es una pregunta bastante popular, me inclino a compartir una buena solución utilizando BFC.
Codepen muestra de lo siguiente here .
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
En este caso, overflow: auto activa el comportamiento del contexto y hace que el elemento correcto se expanda solo al ancho restante disponible y se expandirá de forma natural al ancho completo si desaparece .left . Un truco muy útil y limpio para muchos diseños de IU, pero tal vez sea difícil de entender el "por qué funciona" al principio.
El problema que encontré con la respuesta de Boushley es que si la columna de la derecha es más larga que la de la izquierda, simplemente se ajustará a la izquierda y continuará llenando todo el espacio. Este no es el comportamiento que estaba buscando. Después de buscar en muchas ''soluciones'', encontré este impresionante tutorial sobre cómo crear tres páginas de columnas.
El autor ofrece tres formas diferentes, una de ancho fijo, una con tres columnas variables y una con columnas externas fijas y un ancho de ancho variable. Mucho más elegante y efectivo que otros ejemplos que encontré. Mejoró significativamente mi comprensión del diseño CSS.
Básicamente, en el caso simple de arriba, flota la primera columna a la izquierda y dale un ancho fijo. Luego, asigne a la columna de la derecha un margen izquierdo un poco más ancho que la primera columna. Eso es. Hecho. Código de Ala Boushley:
Aquí hay una demostración en Stack Snippets & jsFiddle
#left {
float: left;
width: 180px;
}
#right {
margin-left: 180px;
}
/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left"> left </div>
<div id="right"> right </div>
Con el ejemplo de Boushley, la columna de la izquierda sostiene la otra columna a la derecha. Tan pronto como la columna de la izquierda termina, la derecha comienza a llenar todo el espacio de nuevo. Aquí, la columna derecha simplemente se alinea más en la página y la columna izquierda ocupa su gran margen. No se necesitan interacciones de flujo.
En estos días, debe utilizar el método flexbox (puede adaptarse a todos los navegadores con un prefijo de navegador).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Más información: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Esto parece lograr lo que estás buscando.
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
<div>
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
He estado trabajando en este problema durante dos días y tengo una solución que puede funcionar para usted y para cualquier otra persona que intente hacer un ancho fijo de respuesta a la izquierda y que el lado derecho rellene el resto de la pantalla sin ajustarse al lado izquierdo. Supongo que la intención es hacer que la página sea receptiva tanto en los navegadores como en los dispositivos móviles.
Aquí está el código
// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps. Without this delay the right div may go off screen when browser is refreshed
setTimeout(function(){
fixRightSideWidth();
$(''.right_content_container'').show(600);
}, 50);
// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
fixRightSideWidth();
});
function fixRightSideWidth(){
$blockWrap = 300; // Point at which you allow the right div to drop below the top div
$normalRightResize = $( window ).width() - $(''.left_navigator_items'').width() - 20; // The -20 forces the right block to fall below the left
if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
$(''.right_content_container'').width( $normalRightResize );
$(''.right_content_container'').css("padding-left","0px");
/* Begin test lines these can be deleted */
$rightrightPosition = $(''.right_content_container'').css("right");
$rightleftPosition = $(''.right_content_container'').css("left");
$rightwidthPosition = $(''.right_content_container'').css("width");
$(".top_title").html(''window width: ''+$( window ).width()+" "+''width: ''+$rightwidthPosition+" "+''right: ''+$rightrightPosition);
/* End test lines these can be deleted */
}
else{
if( $(''.right_content_container'').width() > 300 ){
$(''.right_content_container'').width(300);
}
/* Begin test lines these can be deleted */
$rightrightPosition = $(''.right_content_container'').css("right");
$rightleftPosition = $(''.right_content_container'').css("left");
$rightwidthPosition = $(''.right_content_container'').css("width");
$(".top_title").html(''window width: ''+$( window ).width()+" "+''width: ''+$rightwidthPosition+" "+''right: ''+$rightrightPosition);
/* End test lines these can be deleted */
}
if( $thePageRefreshed == true ){
$thePageRefreshed = false;
}
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
min-width: 310px;
background: #333;
min-height:100vh;
}
body{
background: #333;
background-color: #333;
color: white;
min-height:100vh;
}
.top_title{
background-color: blue;
text-align: center;
}
.bottom_content{
border: 0px;
height: 100%;
}
.left_right_container * {
position: relative;
margin: 0px;
padding: 0px;
background: #333 !important;
background-color: #333 !important;
display:inline-block;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
font-size: 14px;
font-weight: 400;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
border-radius: 0;
box-sizing: content-box;
transition: none;
}
.left_navigator_item{
display:inline-block;
margin-right: 5px;
margin-bottom: 0px !important;
width: 100%;
min-height: 20px !important;
text-align:center !important;
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: top;
}
.left_navigator_items {
float: left;
width: 150px;
}
.right_content_container{
float: right;
overflow: visible!important;
width:95%; /* width don''t matter jqoery overwrites on refresh */
display:none;
right:0px;
}
.span_text{
background: #eee !important;
background-color: #eee !important;
color: black !important;
padding: 5px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
<div class="left_right_container">
<div class="left_navigator_items">
<div class="left_navigator_item">Dashboard</div>
<div class="left_navigator_item">Calendar</div>
<div class="left_navigator_item">Calendar Validator</div>
<div class="left_navigator_item">Bulletin Board Slide Editor</div>
<div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
<div class="left_navigator_item">TV Guide</div>
</div>
<div class="right_content_container">
<div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.
Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.
Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.
Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.
In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
</div>
</div>
</div>
Aquí está mi violín que puede funcionar para usted como lo hizo para mí. https://jsfiddle.net/Larry_Robertson/62LLjapm/
Intente agregar la posición relative , elimine el width y las propiedades float del lado derecho, luego agregue la propiedad left y right con valor 0 .
Además, puede agregar la regla de margin left con el valor que se basa en el ancho del elemento izquierdo (+ algunos píxeles si necesita espacio entre ellos) para mantener su posición.
Este ejemplo está funcionando para mí:
#search {
width: 160px;
height: 25px;
float: left;
background-color: #FFF;
}
#navigation {
display: block;
position: relative;
left: 0;
right: 0;
margin: 0 0 0 166px;
background-color: #A53030;
}
La respuesta de @Boushley fue la más cercana, sin embargo, hay un problema no resuelto que se ha señalado. El div derecho toma todo el ancho del navegador; El contenido toma el ancho esperado. Para ver mejor este problema:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
El contenido está en el lugar correcto (en Firefox), sin embargo, el ancho es incorrecto. Cuando los elementos secundarios comienzan a heredar el ancho (por ejemplo, la tabla con el width: 100% ) se les da un ancho igual al del navegador, lo que hace que se desborden a la derecha de la página y creen una barra de desplazamiento horizontal (en Firefox) o no flotan y ser empujado hacia abajo (en cromo).
Puede solucionar esto fácilmente agregando overflow: hidden en la columna derecha. Esto te da el ancho correcto tanto para el contenido como para el div. Además, la tabla recibirá el ancho correcto y llenará el ancho restante disponible.
Probé algunas de las otras soluciones anteriores, no funcionaban completamente con ciertos casos de borde y estaban demasiado complicadas como para justificarlas. Esto funciona y es simple.
Si hay algún problema o inquietud, siéntase libre de plantearlos.
La respuesta de Boushley parece ser la mejor manera de arreglar esto usando flotadores. Sin embargo, no está exenta de problemas. La flotación anidada dentro del elemento expandido no estará disponible para usted; se romperá la página.
El método que se muestra básicamente es "falso" cuando se trata del elemento en expansión: en realidad no es flotante, solo se está reproduciendo junto con los elementos flotantes de ancho fijo que utilizan sus márgenes.
El problema entonces es exactamente eso: el elemento en expansión no es flotado. Si intenta y tiene algún elemento flotante anidado dentro del elemento en expansión, esos elementos flotantes "anidados" no están realmente anidados en absoluto; Cuando intentas pegar un clear: both; debajo de tus elementos flotantes "anidados", terminarás también limpiando los flotadores de nivel superior.
Luego, para usar la solución de Boushley, me gustaría agregar que debe colocar un div como el siguiente: .fakeFloat {altura: 100%; ancho: 100%; flotador izquierdo; } y coloque esto directamente dentro de la div expandida; todo el contenido del div expandido debe ir luego dentro de este elemento fakeFloat.
Por esta razón, recomiendo usar tablas en este caso específico. Los elementos flotantes realmente no están diseñados para hacer la expansión que le gustaría, mientras que la solución que usa una tabla es trivial. En general, se argumenta que flotar es más apropiado para los diseños, no para las tablas ... pero de todos modos no está usando flotar aquí, lo está fingiendo, y ese tipo de derrota al propósito del argumento estilístico para este caso específico, en mi humilde opinión.
La solución proviene de la propiedad de visualización.
Básicamente necesitas hacer que los dos divs actúen como celdas de una tabla. Entonces, en lugar de usar float:left , tendrás que usar display:table-cell en ambos divs, y para el ancho dinámico div necesitas configurar width:auto; además. Los dos divs se deben colocar en un contenedor de 100% de ancho con la propiedad display:table .
Aquí está el css:
.container {display:table;width:100%}
#search {
width: 160px;
height: 25px;
display:table-cell;
background-color: #FFF;
}
#navigation {
width: auto;
display:table-cell;
/*background-color: url(''../images/transparent.png'') ;*/
background-color: #A53030;
}
*html #navigation {float:left;}
Y el HTML:
<div class="container">
<div id="search"></div>
<div id="navigation"></div>
</div>
IMPORTANTE: para Internet Explorer, debe especificar la propiedad flotante en el div de ancho dinámico, de lo contrario, el espacio no se llenará.
Espero que esto solucione tu problema. Si lo deseas, puedes leer el artículo completo que escribí sobre esto en mi blog .
Me encontré con este mismo problema tratando de diseñar algunos controles jqueryUI . Aunque la filosofía común ahora es "usar DIV lugar de TABLE ", encontré en mi caso que la TABLA funcionó mucho mejor. En particular, si necesita una alineación directa dentro de los dos elementos (p. Ej., Centrado vertical, centrado horizontal, etc.), las opciones disponibles con TABLE ofrecen controles simples e intuitivos para esto.
Aquí está mi solución:
<html>
<head>
<title>Sample solution for fixed left, variable right layout</title>
<style type="text/css">
#controls {
width: 100%;
}
#RightSide {
background-color:green;
}
</style>
</head>
<body>
<div id="controls">
<table border="0" cellspacing="2" cellpadding="0">
<TR>
<TD>
<button>
FixedWidth
</button>
</TD>
<TD width="99%" ALIGN="CENTER">
<div id="RightSide">Right</div>
</TD>
</TR>
</table>
</div>
</body>
</html>
Me pregunto que nadie usó position: absolute con position: relative
Entonces, otra solución sería:
HTML
<header>
<div id="left"><input type="text"></div>
<div id="right">Menu1 Menu2 Menu3</div>
</header>
CSS
header { position: relative; }
#left {
width: 160px;
height: 25px;
}
#right {
position: absolute;
top: 0px;
left: 160px;
right: 0px;
height: 25px;
}
Probé las soluciones anteriores para un líquido a la izquierda y un derecho fijo, pero ninguno de ellos funcionó (soy consciente de que la pregunta es a la inversa, pero creo que esto es relevante). Esto es lo que funcionó:
.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}
.right {float:right; width:150px;}
<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>
Puede usar las propiedades Grid CSS, es la forma más clara, limpia e intuitiva de estructurar sus cajas.
#container{
display: grid;
grid-template-columns: 100px auto;
color:white;
}
#fixed{
background: red;
grid-column: 1;
}
#remaining{
background: green;
grid-column: 2;
}
<div id="container">
<div id="fixed">Fixed</div>
<div id="remaining">Remaining</div>
</div>
Si está tratando de llenar el espacio restante en un flexbox entre 2 elementos, agregue la siguiente clase a un div vacío entre los 2 que desea separar:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Si no necesita compatibilidad con versiones anteriores de ciertos navegadores (IE 10 8 o menos, por ejemplo) puede usar la función CSS calc() :
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
float: left;
width: calc(100% - 180px);
background-color:#00FF00;
}
Tuve un problema similar y encontré la solución aquí: https://.com/a/16909141/3934886
La solución es para un div centro fijo y columnas laterales de líquido.
.center{
background:#ddd;
width: 500px;
float:left;
}
.left{
background:#999;
width: calc(50% - 250px);
float:left;
}
.right{
background:#999;
width: calc(50% - 250px);
float:right;
}
Si desea una columna izquierda fija, simplemente cambie la fórmula en consecuencia.
Tuve un problema similar y se me ocurrió lo siguiente que funcionó bien
CSS:
.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}
HTML:
<div class=top>top </div>
<div>
<div class="left">left </div>
<div class="right">
<div class="content">right </div>
</div>
</div>
Este método no se ajustará cuando la ventana esté reducida, sino que expandirá automáticamente el área de ''contenido''. Mantendrá un ancho estático para el menú del sitio (izquierda).
Y para la expansión automática de la caja de contenido y la demostración de la caja vertical izquierda (menú del sitio):
nuevo en css. Pero resolví este problema usando el bloque en línea. mira esto: http://learnlayout.com/inline-block.html
display:flex uso display:flex
<div style="width:500px; display:flex">
<div style="width:150px; height:30px; background:red">fixed width</div>
<div style="width:100%; height:30px; background:green">remaining</div>
</div>
.container {
width:100%;
display:table;
vertical-align:middle;
}
.left {
width:100%;
display:table-cell;
text-align:center;
}
.right {
width:40px;
height:40px;
display:table-cell;
float:right;
}
<div class="container">
<div class="left">Left</div>
<div class="right">Right</div>
</div
Prueba esto. Funcionó para mí.