Pereiti prie turinio

Problema su <div> ir CSS


Rekomenduojami pranešimai

Sveiki,

Visur, kur ką darydavau, naudodavau <table>, nors esu daug girdėjęs ir skaitęs, kad <div> ir patogiau, ir efektyviau. Pamėginau porą sykių, ir kai nieko gero neišėjo, mečiau šalin. Tačiau dabar nusprendžiau galutinai surišti visus galus. Amžina problema man su div'ais - jų lygiavimas ir išdėstymas (dažnai lipdavo vieni per kitus). Moku CSS, tačiau nežinau kaip priversti div'us man paklusti.

 

Yra štai toks kodas:

<div id="frame">
<div id="top">top</div>
<div class="small_block">tekstas</div>
<div class="small_block">tekstas</div>
<div class="small_block">tekstas</div>
<div class="big_block">tekstas</div>
<div class="big_block">tekstas</div>
<div class="big_block">tekstas</div>
<div class="big_block">tekstas</div>
<div class="big_block">tekstas</div>
</div>

 

Tikslas: priversti visus "small_block" išsirikuoti kairėje pusėje, o "big_block" - dešinėje, lygiuojant nuo viršaus "frame" rėmuose. "small_block" ir "big_block" skaičius nuolat kinta, čia tik 3 ir 5 kaip pvz.

 

Dabartinis css:

#frame {
width: 200px;
margin: 0px;
padding: 0px;
}
div.big_block {
width: 150px;
margin: 1px;
padding: 1px;
float: left;
}
div.small_block {
width: 40px;
margin: 1px;
padding: 1px;
float: right;
}

 

Kaip reiktų papildyti CSS kodą, kad gaučiau ko noriu? Pridedu img, kaip turėtų būti. Gelbėkit...

post-19791-1246109553.gif

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Visu pirma tai pildyti reikia ne tik CSS kodą, bet ir HTML karkasą. Turėtų būti taip:

 

<div id="frame">

<div id="top">top</div>

<div id="left">
	<div class="small_block">tekstas</div>
	<div class="small_block">tekstas</div>
	<div class="small_block">tekstas</div>
</div>

<div id="right">
	<div class="big_block">tekstas</div>
	<div class="big_block">tekstas</div>
	<div class="big_block">tekstas</div>
	<div class="big_block">tekstas</div>
	<div class="big_block">tekstas</div>
</div>

</div>

 

Tada CSS:

 

#frame {
width: 200px;
margin: 0px;
padding: 0px;
}

#left {
float: left;
}

#right {
float: right;
}

.big_block {
width: 150px;
margin: 1px;
padding: 1px;
}

.small_block {
width: 40px;
margin: 1px;
padding: 1px;
}

Redagavo frix
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

×
×
  • Pasirinkite naujai kuriamo turinio tipą...