3 plovoucí prvky div se středovým dynamickou šířkou

hlasů
3

V pořádku, takže můj problém je, že nemohu dostat střed div dynamicky nastavit jeho šířku na základě šířky okna prohlížeče a stále vznáší mezi dvěma 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>
Položena 09/08/2011 v 15:58
zdroj uživatelem
V jiných jazycích...                            


5 odpovědí

hlasů
2

Dalo by se nastavit šířku prostřední div pomocí jQuery , jako například:

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

Pracovní Demo

Odpovězeno 09/08/2011 v 16:03
zdroj uživatelem

hlasů
8

Dalo by se pokusit nastavením CSS takhle:

#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

Odpovězeno 09/08/2011 v 16:05
zdroj uživatelem

hlasů
1

Zkuste to s nějakým triviálním javascript: http://jsfiddle.net/maniator/SjMqU/

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

A to housle pracuje na velikosti okna: http://jsfiddle.net/maniator/SjMqU/4/

Odpovězeno 09/08/2011 v 16:06
zdroj uživatelem

hlasů
0

Nejlepší způsob, jak to udělat, by bylo dát do tabulky, ale pokud nechcete, aby jen aby všechny prvky div se chovají jako buňky tabulky:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Odpovězeno 09/08/2011 v 16:10
zdroj uživatelem

hlasů
0

Dalo by se udělat něco takového:

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

Odpovězeno 09/08/2011 v 16:11
zdroj uživatelem

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