Css-ben kéne egy kis segitség. (? )
Van egy container divem (970px) amiben lesz egy slider a jobb oldalon (float) ami 251px, a slider adatbázisból szedi az adatokat tehát pontos magassága nincs.
Divveket (vagy articleket) szeretnék elhelyezni az oldalon azok is adatbázisból jönnek nincs meg hogy mennyi jön és az sem hogy melyikben mennyi a szöveg, minden bejegyzésnek van egy headerje, aminek a telejs article szélességének kéne lennie(háttér miatt).
És ami nem megy: Úgy kéne megcsinálnom hogy amig a slider tart addig mellé rakja a bejegyzéseket, amikor a slidernek vége akkor pedig lehet a container 100%-a a méret. És kisebb ne legyen pl ha két szó van a bejegyzésben akkor is legyen egy minimum szélessége, a slider meglététől függően. Hogy lehetne ezt megcsinálni css-el?
válasza:Ezt szerintem nem lehet megoldani css-el, a dinamikus magasság mindig is problémás. Lehet aztán hogy egy guru aki megoldja, esetleg van valami css3 csoda, de én nem tudok ilyenről. Viszont érdekes probléma és egy kis javascriptel megoldható.
Csináltam egy kis demot, mentsd le és nézd meg hogyan működik. Változtathatod a #right div tartalmát, és meglátod hogy működik. Foxban, IE-ben és Chromeban is kipróbáltam az újabb verziókban persze:
<html>
<head>
<style>
div {
float:left;
background-color:#CCC;
border:solid 1px black;
width:600px
}
#right{
float:right;
width:251px;
}
</style>
<script src=" [link] type="text/javascript"></script>
<script>
$(document).ready(function(){
var rbottom = getBottom($("#right"));
$(".header").each(function(){
var top = $(this).offset().top;
if(top > rbottom)
$(this).css('width','100%');
})
});
function getBottom(item){
var height = item.height();
var offset = item.offset().top;
return offset+height;
}
</script>
</head>
<body>
<div style="width:970px">
<div class="header">header teszt1</div><div id="right">sor1<br />sor2<br /></div>
<div class="header">header teszt2</div>
<div class="header">header teszt3</div>
<div class="header">header teszt4</div>
<div class="header">header teszt5</div>
</div>
</body>
</html>
válasza:Ami neked kell az a flex-box. Sajnos azonban ezt a css-layout technológiát (még) az ie és a safari böngészők nem támogatják.
Demo:
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!