3 zwevende divs met middelpunt dynamische breedte

stemmen
3

Oke dus mijn probleem is dat ik niet kan krijgen het centrum div om dynamisch in te stellen zijn breedte op basis van browser breedte en nog steeds zweven tussen de twee 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>
De vraag is gesteld op 09/08/2011 om 15:58
bron van user
In andere talen...                            


5 antwoorden

stemmen
2

Je kon de breedte van de middelste div behulp ingesteld jQuery , als zodanig:

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

Working Demo

antwoordde op 09/08/2011 om 16:03
bron van user

stemmen
8

Je zou kunnen proberen het instellen van uw CSS-up als volgt uit:

#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

antwoordde op 09/08/2011 om 16:05
bron van user

stemmen
1

Probeer deze met een aantal triviale javascript: http://jsfiddle.net/maniator/SjMqU/

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

En dit fiddle werkt op venster resize: http://jsfiddle.net/maniator/SjMqU/4/

antwoordde op 09/08/2011 om 16:06
bron van user

stemmen
0

De beste manier om dit te doen zou zijn om het in een tabel te zetten, maar als je niet wilt dat gewoon alle divs gedragen als tabelcellen:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
antwoordde op 09/08/2011 om 16:10
bron van user

stemmen
0

Je zou zoiets als dit te doen:

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

antwoordde op 09/08/2011 om 16:11
bron van user

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