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.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

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