ugrás a tartalomhoz

Képek megjelenítése sortörés nélkül

Anonymous · 2005. Okt. 11. (K), 10.13
Sziasztok!

A kérdésem az lenne, hogyan tudok egy div-ben sortörés nélkül képeket megjeleníteni? van egy ilyen kódom:

Ez a CSS-rész:
.base {
position: relative;
display: block;
height: 64px;
border: 1px solid #000;
background: #0F0;
overflow: hidden;
}


Ez meg a HTML:
<div class="base">
<img src="/kep.jpg" width="100" height="62"><img src="/kep.jpg" width="100" height="62"><img src="/kep.jpg" width="100" height="62"><img src="/kep.jpg" width="100" height="62">
</div>



Szóval a probléma az az, hogy a div-nek nincs szélessége, viszont az azt körülvevő divnek van (az nincs itt a kódban) és a körülvevő div szélességénél a képeket új sorba töri a böngésző..

Tehát nekem egy olyan megoldás kéne, mint ez hogy IMG { display: inline }, csak ugye ilyen nincs, csak az érthetőség kedvéért írtam..

Előre is köszi a helpeket...
 
1

clip és nowrap

Poetro · 2005. Okt. 11. (K), 10.59
Ezekkel lehet érdemes kísérletezni.
--------
Poetro
3

<Nincs cím>

Anonymous · 2005. Okt. 11. (K), 11.51
thx, a nowrap bejött...
2

Galéria?

Dualon · 2005. Okt. 11. (K), 11.01
Gondolom egy galéria képeiről van szó.
Én úgy csináltam meg (ami persze nem az egyetlen üdvözítő megoldás), hogy egy non-ordered listbe helyezem a képeket, majd float: left; position: relative; display: inline; értékeket kapnak a list itemek.
4

display:inline

Jano · 2005. Okt. 11. (K), 12.18
Nana, ne keverjétek a dolgokat!

A képek (img) alapból display:inline tulajdonságú, ezért is kerülnek szépen egymás mellé - amíg elférnek - és nem egymás alá.

A float tulajdonság megadásával a display tulajdonság block értékűre változik, hiába adsz meg mást. A float mellett display:inline csak az IE-re van hatással, ekkor ugyanis néhány floattal kapcsolatos bug (pl. margóduplázás) megszűnik.

A listát én feleslegesnek tartom ebben az esetben. Ha egy menü lenne - ami az oldalak felsorolása - akkor használnám. Bár akkor a képeket nem direktben tenném be, hanem CSS-sel de ez már nem ide tartozik.
5

méretek

Jano · 2005. Okt. 11. (K), 12.25
Látom, hogy a képek 62px magasak, a div viszont 64px 1-1px-es kerettel. Nem tudom, hogy a képeken van-e keret vagy direkt hagytad-e ki a 2px helyet de ha az volt a célod, hogy ugyanolyan magasra allítsd akkor figyelj, mert szabvány szerint a szélesség és magasság értékekhez a padding és border hozzáadódik, csak az IE értelmezi úgy, hogy a szélesség és magasság értékek tartalmazzák a padding és border értékét! Tehát egy szabványos böngészőben a div 66px magas lesz, belül 64px hellyel, IE-ben 64px magas és belül 62px hellyel.

Hogy még bonyolúltabb legyen, az IE is kapcsolható szabvány módba...