Esempio di lavoro di immagine mobile in Testo ricostruito

Question

Sto cercando il modo migliore per avere un'immagine con il testo che appare accanto a esso in Testo ricostruito. Ho trovato diversi siti che pretendono di mostrare come è fatto, ma nessuno mostra un esempio di funzionamento reale. Diversi mostrano ciò che sembra essere esempi in difetto. In realtà sto lavorando con Sphinx (v0.6.6) e spero di evitare di pervertire il CSS "nativo" che viene fornito più del necessario.

Grazie.

Answer 1

Nelle parole di Emily Litella (di SNL), "Oh ... Non importa ..." ;-) E nelle parole di Alex Trebek (di Jepordy!) "E la risposta è. .."

nel file .rst

.. container:: twocol 

    .. container:: leftside 

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

    .. container:: rightside 

     Bla-bla-blah, and yada-yada. 

nel CSS personalizzato (ho usato una copia di sphinxdoc.css che ho messo in ./source/_static/):

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

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

Ogni ..container :: diventa <div>. Nel mio caso, volevo una larghezza fissa per l'immagine e una larghezza variabile per il resto. E, con un po 'di tweking del LaTeX prodotto da Sphinx, ha anche fatto un lavoro decente di produzione di due colonne per quella sezione.

Spero che sia abbastanza per aiutare qualcun altro a capire cosa non era ovvio per me in un primo momento.

Answer 2

Lavorando con Sphinx v1.1.3, ho utilizzato il seguente metodo: un'immagine a sinistra mobile e un blocco di compensazione. Non sembra essere documentato da nessuna parte, ed è un po 'hacky, quindi condividere qui ...

Prima l'immagine, allineata a sinistra come da questo rST doc.

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

Quindi puoi scrivere i tuoi paragrafi nel modo normale, avvolgono l'immagine.

Quando hai finito, inserisci un chiaro sporco - Ho usato un png 1x1 come contenuto per il contenitore.

.. container:: clearer 

    .. image :: _static/spacer.png 

Questo genera il seguente codice HTML, che si avvale di div.clearer CSS della Sfinge.

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

Quindi è possibile continuare a scrivere, con il paragrafo successivo ben cancellato.

Answer 3

Penso che si possa ottenere un risultato migliore utilizzando substitutions.

Ecco un estratto dalla documentazione che può essere utile:

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

.. |biohazard| image:: biohazard.png 

Spero che questo aiuta

Answer 4

È possibile definire una sostituzione:

.. |clearfloat| raw:: html 

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

Quindi utilizzare l'attributo align per le immagini :

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

e inserire un più chiaro come questo:

|clearer|