3 div galleggianti con larghezza center dinamico

voti
3

Va bene così il mio problema è che non riesco a ottenere il div centrale per impostare dinamicamente la sua larghezza in base alla larghezza del browser e ancora galleggiare tra i due div.

<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>
È pubblicato 09/08/2011 alle 15:58
fonte dall'utente
In altre lingue...                            


5 risposte

voti
2

È possibile impostare la larghezza del div centrale utilizzando jQuery , come ad esempio:

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

Demo di lavoro

Risposto il 09/08/2011 a 16:03
fonte dall'utente

voti
8

Si potrebbe provare a impostare il vostro CSS in questo modo:

#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

Risposto il 09/08/2011 a 16:05
fonte dall'utente

voti
1

Prova questo con alcuni javascript banale: http://jsfiddle.net/maniator/SjMqU/

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

E questo violino funziona sulla finestra di ridimensionamento: http://jsfiddle.net/maniator/SjMqU/4/

Risposto il 09/08/2011 a 16:06
fonte dall'utente

voti
0

Il modo migliore per farlo sarebbe quello di metterlo in un tavolo, ma se non si vuole che solo fare tutti i div si comportano come celle di una tabella:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Risposto il 09/08/2011 a 16:10
fonte dall'utente

voti
0

Si potrebbe fare qualcosa di simile a questo:

#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/

Risposto il 09/08/2011 a 16:11
fonte dall'utente

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