3 divs plutitoare cu latime dinamic centru

voturi
3

În regulă, astfel problema mea este că eu nu pot obține centrul div pentru a seta dinamic lățimea sa bazat pe latimea browser-ului și încă plutesc între cele două 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>
Întrebat 09/08/2011 la 15:58
sursa de către utilizator
În alte limbi...                            


5 răspunsuri

voturi
2

Ai putea stabili lățimea div de mijloc folosind jQuery , ca atare:

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

Demonstrație de lucru

Publicat 09/08/2011 la 16:03
sursa de către utilizator

voturi
8

Ai putea încerca să configurați CSS sus ca aceasta:

#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

Publicat 09/08/2011 la 16:05
sursa de către utilizator

voturi
1

Încercați acest lucru cu unele javascript banal: http://jsfiddle.net/maniator/SjMqU/

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

Și această vioară funcționează pe redimensionare a ferestrei: http://jsfiddle.net/maniator/SjMqU/4/

Publicat 09/08/2011 la 16:06
sursa de către utilizator

voturi
0

Cel mai bun mod de a face acest lucru ar fi să-l pună într-un tabel, dar dacă nu doriți ca doar fac toate divs se comporte ca celulele de tabel:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Publicat 09/08/2011 la 16:10
sursa de către utilizator

voturi
0

Ai putea face ceva de genul:

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

Publicat 09/08/2011 la 16:11
sursa de către utilizator

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