3 flytende div-elementer med sentrum dynamisk bredde

stemmer
3

Alright så mitt problem er at jeg ikke kan få sentrum div å sette dynamisk bredden basert på nettleseren bredde og fortsatt flyte mellom de to 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>
Publisert på 09/08/2011 klokken 14:58
kilden bruker
På andre språk...                            


5 svar

stemmer
2

Du kan angi bredden på midten div bruke jQuery som sådan:

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

Working Demo

Svarte 09/08/2011 kl. 15:03
kilden bruker

stemmer
8

Du kan prøve å sette inn CSS opp som dette:

#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

Svarte 09/08/2011 kl. 15:05
kilden bruker

stemmer
1

Prøv dette med noen trivielle javascript: http://jsfiddle.net/maniator/SjMqU/

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

Og dette fele fungerer på vindusstørrelse: http://jsfiddle.net/maniator/SjMqU/4/

Svarte 09/08/2011 kl. 15:06
kilden bruker

stemmer
0

Den beste måten å gjøre det ville være å sette det inn i en tabell, men hvis du ikke vil at bare gjøre alle divs oppfører seg som tabellceller:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Svarte 09/08/2011 kl. 15:10
kilden bruker

stemmer
0

Du kan gjøre noe sånt som dette:

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

Svarte 09/08/2011 kl. 15:11
kilden bruker

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