merkezi dinamik genişlikte 3 kayan divs

oy
3

Tamam bu yüzden benim sorunum ben merkez div dinamik olarak tarayıcı genişliğine göre genişliğini ayarlamak ve hala iki divs arasında yüzer alınamıyor olmasıdır.

<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>
Oluştur 09/08/2011 saat 15:58
kaynak kullanıcı
Diğer dillerde...                            


5 cevaplar

oy
2

Sen kullanarak orta div genişliğini ayarlayabilirsiniz jQuery gibi:

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

Çalışma Demosu

Cevap 09/08/2011 saat 16:03
kaynak kullanıcı

oy
8

Böyle CSS kurma deneyebilirsiniz:

#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

Cevap 09/08/2011 saat 16:05
kaynak kullanıcı

oy
1

Bazı önemsiz javascript ile bu deneyin: http://jsfiddle.net/maniator/SjMqU/

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

Ve bu keman Pencerenin yeniden boyutlandırma çalışır: http://jsfiddle.net/maniator/SjMqU/4/

Cevap 09/08/2011 saat 16:06
kaynak kullanıcı

oy
0

Eğer sadece tüm div'ler tablo hücreleri gibi davranmaya yapmak istemiyorsanız en iyi yolu, bir tabloya koymak olurdu, ama hiç:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Cevap 09/08/2011 saat 16:10
kaynak kullanıcı

oy
0

Böyle bir şey yapabileceğini:

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

Cevap 09/08/2011 saat 16:11
kaynak kullanıcı

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