Jump to content
php.lv forumi

Divi paralēli div'i


MZM

Recommended Posts

Man uznācis CSS stulbums.

Vēlme: uztaisīt bloku (div'u), kurš satur sevī divus paralēlus blokus (div'us), kas aizņem 100% horizontālā virzienā no parent bloka (60% un 40%). ķipa kaste ar 2 kolonām.

Problēma: ja izmanto float, tad paralēlie bloki tiek izņemti no normal flow un tad viss sagriežas galīgi šķērsām.

Iespējamie risinājumi: taisīt doto fišku ar tabulām, bet tas būs nepareizi, jo abiem paralēlajiem div'iem jābūt saistītiem vizuāli un nevis loģiski.

 

Tiem, kas neko nesaprata.

Jebkurā vietā lapā ievietojams un "saturs1" vienmēr blakus "saturs2", nevis zem/virs:

<div class="box">
 <div class="lbox">saturs1</div>
 <div class="rbox">saturs2</div>
</div>

 

Jūsu kommenti? Kā to realizēt neizmantojot netīrus hakus?

 

PS. Varat neraxtīt "tu esi stulbs", ask google utml. - pārāk noguris, lai saprastu šo vārdu jēgu.

Link to comment
Share on other sites

Man ar float viss izskataas OK (uz IE6) - divas kolonnas un viena otrai blakus.

 

<html>
<head>
<title>test</title>
<style type="text/css">

#container
{
width: 750px;
}

#left
{
width: 60%;
height: 300px;
float: right;
background: #963;
}

#right
{
width: 40%;
height: 300px;
float: left;
background: #369;
}

</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

Link to comment
Share on other sites

TNX. Ideja laba, bet ja m?s container papildinam ar border, tad k??st redzams, ka tas atkal jau ir tikai workarounds :(

 

Un tas, kur? teica table, laikam nepietiekami uzman?gi las?ja manu postu - table irad tikai workaround, jo tabulas irad dom?tas tabularo datu izvieto?anai nevis lapas layouta veido?anai, jo sav?d?k var joproj?m tur?ties pie tabula'in'tabula dizaina, kas izskat?s labi, bet saturiski irad nepareizs.

 

Secin?jums: CSS 3 nepiecie?ams float in parent box ~.

Link to comment
Share on other sites

MZM, tas NAV workaraunds. Box modelis tieši tā arī nosaka - kopējais platums ir padding+margin+width+border, kā rezultātā, ja tu norādi attiecīgu platumu %, pieliekot klāt 1px borderi, vietas vairs nepietiek...

Link to comment
Share on other sites

×
×
  • Create New...