3 floating divs mit Mitteln dynamischer Breite

stimmen
3

In Ordnung so mein Problem ist, dass ich nicht das Zentrum div dynamisch bekommen kann zu seiner Breite festgelegt, basierend auf Browser-Breite und noch schweben zwischen den beiden 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>
Veröffentlicht am 09/08/2011 um 15:58
quelle vom benutzer
In anderen Sprachen...                            


5 antworten

stimmen
2

Sie könnten die Breite des mittleren div mit Set jQuery , wie zum Beispiel:

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

Arbeits Demo

Beantwortet am 09/08/2011 um 16:03
quelle vom benutzer

stimmen
8

Sie könnten versuchen, Ihre CSS-up wie diese Einstellung:

#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

Beantwortet am 09/08/2011 um 16:05
quelle vom benutzer

stimmen
1

Versuchen Sie, diese mit etwas trivial javascript: http://jsfiddle.net/maniator/SjMqU/

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

Und diese Geige arbeitet auf Fenster Resize: http://jsfiddle.net/maniator/SjMqU/4/

Beantwortet am 09/08/2011 um 16:06
quelle vom benutzer

stimmen
0

Der beste Weg, es zu tun wäre, es in einen Tisch zu bringen, aber wenn Sie nicht wollen, dass nur alle machen die divs wie Tabellenzellen verhalten:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Beantwortet am 09/08/2011 um 16:10
quelle vom benutzer

stimmen
0

Man könnte so etwas tun:

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

Beantwortet am 09/08/2011 um 16:11
quelle vom benutzer

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