WN - Begränsa ett blocks ram mot flytande bild i CSS

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Begränsa ett blocks ram mot flytande bild i CSS (https://www.wn.se/forum/showthread.php?t=36014)

boja	2009-03-28 10:25

Hej.
Jag har block med text som flyter runt bilder att se bra ut. Koden ser ut ungefär så här:

Kod:

<img src="halv-genomskinlig.png" style="float:right;">

<p style="border:1px dotted black" >

   Bla bla bla bla bla bla bla bla bla bla bla bla bla

</p>

Den prickade linjen syns bakom bilden. Jag skulle vilja att blocken beter sig som det gröna fältet på http://jolbas.se/float. Det gröna fältet är en tabell, och det känns ju inte riktigt rätt att använda här.

Är det någon som har en bättre lösning?

Magnus_A

2009-03-28 11:58

display:inline;

boja	2009-03-28 12:48

Nja, inte rigtigt bra.
Då blir det som på det blåa stycket på exempelsidan
http://jolbas.se/float

allstars

2009-03-28 15:25

hör kanske inte till frågan men varför vill du att ett stycke skall se ut så där över huvudtaget? Känns inte som att ett textstycke passar bra med en border på det viset. Skall man ha en box får man köra enligt boxmodellen imo.

boja	2009-03-28 15:45

Nej.
Det handlar egentligen om pre-element som ska visa kod. Ungefär som exempeklkoden i första inlägget. Här i forumet verkar de använda tabeller till att visa kod.
När jag tänker efter lite, kanske det är dumt att bryta raderna automatiskt när man visar kod.

boja	2009-03-29 13:42

Om jag gör en tabell-cell av stycket blir det som jag vill. Frågan är då bara om det är rätt att göra så:

Kod:

<img src='halv-genomskinlig.png style='float:right;' />

<p style='border:1px dotted black; display:table-cell;'> 

 * Bla bla bla bla bla bla bla bla bla bla bla bla bla

</p>

Det gula fältet på http://jolbas.se/float är gjort så

Jonas

2009-03-29 16:10

Kod:

<p style="border: 1px dotted black;">

<img src="halv-genomskinlig.png" style="float: right;" />

 * Bla bla bla bla bla bla bla bla bla bla bla bla bla

</p>

Sådär då?

boja	2009-03-29 20:36

Citat:

Originally posted by Jonas@Mar 29 2009, 16:10

Kod:

p style=border 1px dotted black; img src=halv-genomskinlig.png style=float right; / * Bla bla bla bla bla bla bla bla bla bla bla bla bla /p

Sådär då?

Blir exakt samma resultat som om bilden ligger innan. Tyvärr.

Jonas

2009-03-29 20:43

Kod:

<div style="width: 600px;">

<img src="bild.png" style="width: 200px; float: right;" />

<p style="border: 1px dotted black;">Lorem Ipsum</p>

</div>

boja	2009-03-29 23:56

Citat:

Originally posted by Jonas@Mar 29 2009, 20:43

Kod:

<div style='width 600px;'> <img src='bild.png' style='width 200px; float: right;' /> <p style='border: 1px dotted black;'>Lorem Ipsum</p> </div>

Hjälpte inte heller. Förstår inte riktigt vad som skulle ge önskad effekt i ditt förslag

Alla tider är GMT +2. Klockan är nu 13:54.

Sidan 1 av 2

Visa 40 inlägg från det här ämnet på en sida