it-swarm-eu.dev

div se zhroutí nad přemístěným prvkem

Chci seznam řádků, které mají následující vzhled:

+------------------------#main-----------------------+
|                                                    |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| +------+ pellentesque. Proin tristique tortor sit  |
|          amet magna ornare eleifend. Aliquam       |
|          placerat sapien vitae tellus mattis       |
|          euismod.                                  |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| |      | pellentesque.                             |
| +------+                                           |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| +------+ vel est porttitor et laoreet enim         |
|          pellentesque.                             |
|                                                    |
|                                                    |
+----------------------------------------------------+

Mám všechny výše uvedené v div id = "main". Každý pár obrázků a textů je v div class = "ProdList". Jak vidíte výše, obrázky se budou lišit výškou, ale nikoli šířkou. Text může nebo nemusí být vyšší než obrázek. To je to, co způsobuje můj problém. Chci 20px okraj pod každým . ProdList bez ohledu na to, zda je obrázek nebo odstavec vyšší. CSS níže poskytuje perfektní výsledky, pokud je text vyšší než obrázek. Ale protože umisťuji obrázek, . ProdList si už nebude dělat starosti s jeho obklopením. To způsobí, že . ProdList níže se zobrazí nad obrázkem, pokud je výše uvedený obrázek vyšší než text. Snažil jsem se změnit polohu textu místo obrázku, ale mám jen opačný problém. Jak mohu mít . ProdList plně obsahovat jak obrázek, tak text?

Zde je css, který jsem zkusil:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}
/*just a centered, fixed width area*/

.ProdList {margin-bottom: 20px; position: relative;}
/*contains an image and a paragraph*/

.ProdList p {margin-left: 110px;}
/*makes room for the picture*/

.ProdList img {position: absolute;top: 0;}
/*moves the picture to the upper left of .ProdList*/

Zdá se, že přidání slova „Clear: both“ není k ničemu.

Protože se jedná o technicky tabulková data, předpokládám, že bych mohl použít tabulku, aniž bych příliš rozzlobil bohy css, ale jsem si jist, že je to možné. Jen mi něco chybí.

3
Jeff

Funguje to pro mě:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}

.ProdList {
     padding-bottom: 20px; 
     float: left; 
     clear: left; 
     width: 100%; 
     border:2px solid green
}
/*contains an image and a paragraph*/

.ProdList p {
     margin-left: 50px;
     float:left;
     width:60%;
}
/*makes room for the picture. Play with margin and width % for best fit*/

.ProdList img {float: left;width:100px}
/*moves the picture to the upper left of .ProdList*/

„Ohraničení“ na ProdList DIV je jen proto, abych viděl rozsah DIV, abych se ujistil, že se nerozpadá. Často jsem dal

div {
   border: 1px solid red;
}

v dolní části mých souborů CSS, abych je mohl zrušit, když chci vidět, kde moje DIV skutečně klesají.

Jedinou komplikovanou věcí je, že protože obraz není umístěn absolutně, okraj odstavce je nyní relativní ke straně obrázku. Pokud jsou všechny vaše obrazové šířky stejné, můžete si vybrat img na img (což natáhne obrázky stejně - jen jsem screengrabbed pár obrázků o stejné šířce, ale různých výškách.

PDATE:

Přidaná šířka: 100% k divizi ProdList, aby tato práce fungovala na IE7, a šířka: 60% v odstavci, aby fungovala s IE a Firefoxem. Možná ještě bude třeba tweeking.

2
CMPalmer

Nejjednodušším způsobem je zbavit se polohovacích materiálů a jednoduše vznášet obraz a odstavec. Potom k elementům overflow: hidden přidejte buď float: left nebo .ProdList.

0
DisgruntledGoat

existuje velmi sladké řešení, které facebook implementuje právě pro tento problém. Pokud máte firebug nainstalovaný v firefoxu, můžete jej snadno zkontrolovat. Například zde:

http://www.facebook.com/pages/Yahoo-Nachrichten/108333755877035?ref=ts&v=wall (vždy vedle sebe mají obrázek a nějaký text)

obraz dostane: float: left a text dostane: display: table-cell; svislé zarovnání: horní; šířka: 1000px;

Jedinou nevýhodou je, že budete muset napsat nějaký specifický kód pro IE6 a IE7, který najdete tak, že se podíváte na stránku facebook v těchto prohlížečích s panelem nástrojů pro vývojáře

0
andrej