trucos para elementos flotantes dentro de los elementos de lista

Question

Estoy tratando de crear una lista de instrucciones usando listas ordenadas (ol). En el interior quiero que el texto de la instrucción flote hacia la izquierda y la imagen que muestra el paso flote hacia la derecha.

He intentado envolver el contenido en el interior del elemento de la lista (li), así:

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

Eso sólo envía la imagen fuera del elemento li. Intenté agregar un div de compensación después de los dos elementos flotantes dentro del li, intenté agregar un hack claro al elemento li en sí. También intenté anidar los elementos p e img dentro de divs flotantes.

¿Esto es posible? Me gustaría usar esta manera, pero generaré alguna otra solución si no es así.

Answer 1

Un contenedor no flotante no reconocerá que su contenido tiene ancho y alto, lo que hace que el contenedor se pliegue a su altura mínima permitida dado cualquier otra regla CSS en su lugar.

Para que el elemento de la lista que contiene contenga el párrafo y la imagen, deberá hacer flotar tanto el elemento de lista como la lista ordenada principal.

Tanto la lista ordenada como los elementos de la lista se reducirán al ancho mínimo requerido para encapsular el contenido de manera presentacional. Esto puede resultar en una lista demasiado delgada. Aplique los anchos adecuados a la lista ordenada y los elementos de la lista para manejar esto.

Considere borrar cualquier elemento inmediatamente debajo de la lista ordenada en el DOM para asegurarse de que no se deslice a la izquierda o derecha de la lista.

Answer 2

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

Prueba esto, me ayudó.

Answer 3

También podría considerar usar el overflow: hiddentechnique; agregar overflow: hidden a su li le permitirá expandirse para contener el contenido flotante.

jsFiddle here.