3 floating divs mit Mitteln dynamischer Breite

Question

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>

css html

Veröffentlicht am 09/08/2011 um 15:58
quelle vom benutzer Adam Merrifield

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 Rion Williams

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 Neal

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 nammer

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 Jason Gennaro

Gareth · Accepted Answer · 2011-08-09 16:05

stimmen

8

Der Autor der Frage hat diese Antwort als die beste genommen.

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 Gareth