Sztuczki dla elementów pływających wewnątrz elementów listy

Question

Próbuję utworzyć listę instrukcji przy użyciu uporządkowanych list (ol). Wewnątrz chcę, aby tekst instrukcji był unoszony w lewo, a obraz pokazujący krok płynął w prawo.

Próbowałem owijania zawartości wewnątrz elementu listy (LI) tak:

<ol> 
     <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li> 
    </ol> 

To właśnie przesyła obraz na zewnątrz elementu li. Próbowałem dodając clearing div po dwóch elementach pływających wewnątrz li, próbowałem dodać jasne hack do samego elementu li. Próbowałem również zagnieżdżać elementy p i img wewnątrz pływających elementów div.

Czy to możliwe? Chciałbym użyć tego sposobu, ale wygeneruję inne rozwiązanie, jeśli nie.

Answer 1

Niepłodny pojemnik nie rozpoznaje jego zawartości jako mającej i szerokości lub wysokości, powodując zawalenie kontenera do jego minimalnej dozwolonej wysokości, z uwzględnieniem wszelkich innych reguł CSS.

Dla akapitu i obrazu, który ma być ograniczony przez element listy zawierającej, będziesz musiał uaktywnić zarówno element listy, jak i listę uporządkowaną nadrzędną.

Zarówno uporządkowana lista, jak i elementy listy zostaną zredukowane do minimalnej szerokości wymaganej do prezentacji zawartości. Może to spowodować zbyt wąską listę. Zastosuj odpowiednie szerokości do uporządkowanej listy i elementy listy, aby sobie z tym poradzić.

Rozważ usunięcie wszystkich elementów bezpośrednio pod uporządkowaną listą w DOM, aby upewnić się, że nie wsuwają się po lewej lub prawej stronie listy.

Answer 2

<ol> 
    <li> 
    <div> 
     <p style="float:left">Follow these instructions</p> 
     <img style="float:right" src="[***]" alt="" /> 
    </div> 
    </li> 
</ol> 

Spróbuj tego, pomógł mi.

Answer 3

Można również rozważyć użycie overflow: hiddentechnique; dodanie overflow: hidden do twojego li umożliwi jej rozwinięcie, aby zawierało pływającą zawartość.

jsFiddle here.