Képek megjelenítése sortörés nélkül
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:
Ez meg a HTML:
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...
■ 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;
}
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>
<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...
clip és nowrap
--------
Poetro
<Nincs cím>
Galéria?
É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.
display:inline
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.
méretek
Hogy még bonyolúltabb legyen, az IE is kapcsolható szabvány módba...