3 przestawne DIV z centrum dynamicznej szerokości

głosy
3

Dobrze więc moim problemem jest to, że nie mogę dostać się do centrum div dynamicznie ustawić jego szerokość na podstawie szerokości okna przeglądarki i nadal unoszą się między dwoma div.

<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>
Utwórz 09/08/2011 o 15:58
źródło użytkownik
W innych językach...                            


5 odpowiedzi

głosy
2

Można ustawić szerokość środkowej div przy użyciu jQuery , jako takich:

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

Demo robocza

Odpowiedział 09/08/2011 o 16:03
źródło użytkownik

głosy
8

Można spróbować ustawić swój CSS się tak:

#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

Odpowiedział 09/08/2011 o 16:05
źródło użytkownik

głosy
1

Spróbuj tego z jakiegoś błahego javascript: http://jsfiddle.net/maniator/SjMqU/

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

I to skrzypce działa na zmiany rozmiaru okna: http://jsfiddle.net/maniator/SjMqU/4/

Odpowiedział 09/08/2011 o 16:06
źródło użytkownik

głosy
0

Najlepszym sposobem na to byłoby umieścić go w tabeli, ale jeśli nie chcemy po prostu zrobić wszystko DIV zachowują się jak komórki tabeli:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Odpowiedział 09/08/2011 o 16:10
źródło użytkownik

głosy
0

Można zrobić coś takiego:

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

Odpowiedział 09/08/2011 o 16:11
źródło użytkownik

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