Ví dụ làm việc về hình ảnh nổi trong văn bản được tái cấu trúc

Question

Tôi đang tìm cách tốt nhất để có hình ảnh có văn bản xuất hiện bên cạnh văn bản được tái cấu trúc. Tôi đã tìm thấy một số trang web nhằm mục đích để hiển thị như thế nào nó được thực hiện nhưng không ai cho thấy một ví dụ hoạt động thực tế. Một số hiển thị những gì dường như là thất bại ví dụ. Tôi đang thực sự làm việc với Sphinx (v0.6.6) và hy vọng tránh biến thái CSS "bản địa" đi kèm với nó nhiều hơn mức cần thiết.

Cảm ơn.

Answer 1

Theo lời của Emily Litella (của SNL), "Ồ ... Đừng bận tâm ..." ;-) Và theo lời của Alex Trebek (của Jepordy!) "Và câu trả lời là. .."

trong .rst tập tin

.. container:: twocol 

    .. container:: leftside 

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

    .. container:: rightside 

     Bla-bla-blah, and yada-yada. 

trong CSS tùy chỉnh (tôi đã sử dụng một bản sao của sphinxdoc.css mà tôi đưa vào ./source/_static/):

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

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

Mỗi ..container :: trở thành một <div>. Trong trường hợp của tôi, tôi muốn một chiều rộng cố định cho hình ảnh và chiều rộng biến cho phần còn lại. Và, với một chút wee tinh chỉnh của LaTeX được tạo ra bởi Sphinx, nó cũng đã làm một công việc tốt về sản xuất hai cột đầu ra cho phần đó.

Tôi hy vọng điều đó đủ để giúp người khác tìm ra điều không rõ ràng với tôi lúc đầu.

Answer 2

Làm việc với Sphinx v1.1.3, tôi đã sử dụng phương pháp sau - hình ảnh nổi bên trái và khối xóa. Dường như nó không được ghi lại ở bất kỳ nơi nào, và có một chút hacky, vì vậy việc chia sẻ ở đây ...

Đầu tiên hình ảnh, căn trái theo như điều này rST doc.

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

Sau đó, bạn có thể viết đoạn văn của mình theo cách thông thường, chúng bao quanh hình ảnh.

Khi bạn hoàn tất, hãy thả bộ lọc bẩn hơn - Tôi đã sử dụng png 1x1 làm nội dung cho vùng chứa.

.. container:: clearer 

    .. image :: _static/spacer.png 

Điều này tạo ra HTML sau, sử dụng CSS của nhân sư div.clearer CSS.

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

Sau đó, bạn có thể tiếp tục viết, với đoạn tiếp theo của bạn được xóa hoàn toàn.

Answer 3

Tôi nghĩ rằng có thể đạt được kết quả tốt hơn bằng cách sử dụng substitutions.

Dưới đây là trích từ các tài liệu mà có thể hữu ích:

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

.. |biohazard| image:: biohazard.png 

Tôi hy vọng điều này sẽ giúp

Answer 4

Bạn có thể xác định quyền thay người:

.. |clearfloat| raw:: html 

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

Sau đó sử dụng thuộc tính align cho hình ảnh :

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

Và chèn một hình ảnh rõ ràng hơn như sau:

|clearer|