Ejemplo de trabajo de imagen flotante en texto estructurado

Estoy buscando la mejor manera de tener una imagen con el texto que aparece al lado en texto reestructurado. He encontrado varios sitios que pretenden mostrar cómo se hace, pero ninguno muestra un ejemplo real de funcionamiento. Varios muestran lo que parecen ser ejemplos fallidos. De hecho, estoy trabajando con Sphinx (v0.6.6) y espero evitar pervertir el CSS "nativo" que viene con él más de lo necesario.Ejemplo de trabajo de imagen flotante en texto estructurado

Gracias.

Fuente

2010-12-28 Ubuntourist

En palabras de Emily Litella (de SNL), "Oh ... No importa ..." ;-) Y en las palabras de Alex Trebek (de Jepordy!) "Y la respuesta es. .."

en el archivo .rst

.. container:: twocol 

    .. container:: leftside 

     .. figure:: _static/illustrations/structure.svg 

    .. container:: rightside 

     Bla-bla-blah, and yada-yada.

en el CSS personalizado (que utiliza una copia de sphinxdoc.css que puse en ./source/_static/):

div.leftside { 
    width: 414px; 
    padding: 0px 3px 0px 0px; 
    float: left; 
} 

div.rightside { 
    margin-left: 425px; 
}

Cada ..container :: se convierte en <div>. En mi caso, quería un ancho fijo para la imagen y un ancho variable para el resto. Y, con un poquito de ajuste de LaTeX producido por Sphinx, también hizo un trabajo decente de producción de dos columnas para esa sección.

Espero que sea suficiente para ayudar a alguien a descubrir lo que no era obvio al principio.

Fuente

2010-12-31 14:13:02 Ubuntourist

Al trabajar con Sphinx v1.1.3, he estado utilizando el siguiente método: una imagen flotante izquierda y un bloque de limpieza. No parece estar documentado en ninguna parte, y es un poco raro, así que compartir aquí ...

Primero la imagen, alineado a la izquierda según este rST doc.

.. image:: _static/my_image.png 
    :align: left

Luego puede escribir sus párrafos de la manera normal, envuelven la imagen.

Cuando haya terminado, deje una sucia más clara - He usado un png de 1x1 como contenido para el contenedor.

.. container:: clearer 

    .. image :: _static/spacer.png

Esto genera el siguiente código HTML, que hace uso de CSS div.clearer de Sphinx.

<div class="clearer container"> 
    <img src="_images/spacer.png" alt="_images/spacer.png"> 
</div>

Luego puede seguir escribiendo, con su próximo párrafo bien aclarado.

Fuente

2012-10-20 12:58:29 jamesc

Han encontrado una manera de hacer esto para las figuras? http://stackoverflow.com/questions/16463051/how-to-create-floating-figures-in-restructuredtext-sphinx – dmd

@dmd No, no he utilizado las cifras, pero ¿podría funcionar una técnica similar? – jamesc

No, no hay suerte con eso. :( – dmd

Creo que se podría lograr un mejor resultado usando substitutions.

Aquí un extracto de la documentación que puede ser útil:

The |biohazard| symbol must be used on containers used to 
dispose of medical waste. 

.. |biohazard| image:: biohazard.png

espero que esto ayude a

Fuente

2013-10-04 15:50:31 vinnie

Aunque este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace de referencia. Las respuestas de solo enlace pueden dejar de ser válidas si la página vinculada cambia – Joel

He editado la respuesta agregando un ejemplo de uso de sustituciones. Gracias por señalar – vinnie

. Eso es completamente diferente: está integrando una pequeña imagen en línea. (Sabía cómo hacer eso). Quería mucho imagen más grande en un diseño de dos columnas. (Al menos, creo que eso es lo que quería hace tres años). – Ubuntourist

Se puede definir una substitución:

.. |clearfloat| raw:: html 

    <div class="clearer"></div>

continuación, utilizar el atributo de alineación de imágenes :

.. image:: _static/my_image.png 
    :align: left

e insertar una más clara de esta manera:

|clearer|

Fuente

2015-09-01 16:05:18 galinette

Ejemplo de trabajo de imagen flotante en texto estructurado

Respuesta

Cuestiones relacionadas