3 divs flotantes con centro de anchura dinámico

votos
3

Está bien así que mi problema es que no puedo conseguir el div centro para configurar dinámicamente el ancho basado en ancho del navegador y todavía flotar entre los dos divs.

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
Publicado el 09/08/2011 a las 15:58
fuente por usuario
En otros idiomas...                            


5 respuestas

votos
2

También podemos establecer la anchura del div media usando jQuery , tales como:

$('#middle').width($('#container').width()-120);

demostración de Trabajo

Respondida el 09/08/2011 a las 16:03
fuente por usuario

votos
8

Usted podría tratar de establecer su CSS de esta manera:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

Respondida el 09/08/2011 a las 16:05
fuente por usuario

votos
1

Intente esto con algo de JavaScript trivial: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

Y esto funciona en el violín de cambio de tamaño de ventana: http://jsfiddle.net/maniator/SjMqU/4/

Respondida el 09/08/2011 a las 16:06
fuente por usuario

votos
0

La mejor manera de hacerlo sería poner en una tabla, pero si usted no quiere que sólo hacen todos los divs se comportan como celdas de la tabla:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Respondida el 09/08/2011 a las 16:10
fuente por usuario

votos
0

Se podría hacer algo como esto:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

Respondida el 09/08/2011 a las 16:11
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more