3 lebegő divs középső dinamikus szélesség

szavazat
3

Rendben, így a probléma az, hogy nem tudok a központtól div dinamikusan a szélessége alapján böngésző szélességét és még lebegnek a két 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>
A kérdést 09/08/2011 15:58
a forrás felhasználó
Más nyelveken...                            


5 válasz

szavazat
2

Lehet meg a szélessége a középső div segítségével jQuery , mint például:

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

Working Demo

Válaszolt 09/08/2011 16:03
a forrás felhasználó

szavazat
8

Megpróbálhatod a beállítás a CSS, mint ez:

#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

Válaszolt 09/08/2011 16:05
a forrás felhasználó

szavazat
1

Próbáld ki ezt a néhány triviális javascript: http://jsfiddle.net/maniator/SjMqU/

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

És ez a hegedű működik Ablakátméretezés: http://jsfiddle.net/maniator/SjMqU/4/

Válaszolt 09/08/2011 16:06
a forrás felhasználó

szavazat
0

A legjobb módja, ha az lenne, hogy tedd be egy táblázatot, de ha nem akarjuk, hogy ezt mind a divs viselkednek táblázatcellákat:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Válaszolt 09/08/2011 16:10
a forrás felhasználó

szavazat
0

Lehet tenni valamit, mint ez:

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

Válaszolt 09/08/2011 16:11
a forrás felhasználó

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