html - CSS不同列设置

Question

我有这个 div:

<div style="position: relative; width: 100%; -moz-column-count:3; -webkit-column-count: 3; -moz-column-gap: 2%; -webkit-column-gap: 2%;">text...text</div>

我需要让最后一列开始于其他列之下。我认为图片会有所帮助:

电缆图像比列宽，因此不在该 div 中。图片上的 HTML align=top 将不起作用。我可以控制单个列吗？

有什么想法吗？任何人...

布局结构:

<div>
<div style="width: 100%; background-image: url(images/bg_pg10-11.jpg); background-repeat: repeat;">
    <div style="width: 100%;"><img src="images/port/pg10_11.png" alt="" width="89%" border="0" style="margin: 1%; margin-top: 2%; margin-bottom: 1%; margin-left: 5.5%;"></div>
    <div style="width: 100%;"><img src="../images/port/tit_notas_merc2.png" alt="" width="20.5%" border="0" style="margin-bottom: 7%; margin-left: 5.5%;"></div>
    <div style="width: 73%; margin-left: 19%;"><img src="images/port/titulo_pg10-11_pt.png" alt="" width="100%" border="0"></div>
    <img src="images/img01_pg10-11.png" width="32%" border="0" style="position: absolute; margin-left: 68%;" ALIGN="Top">
    <div style="width: 73%; margin-left: 19%; margin-top: 2%;">
        <div class="txtInterno" style="position:relative; width: 100%; border:0px solid #000000; -moz-column-count:3; -webkit-column-count:3; -moz-column-gap:2%; -webkit-column-gap:2%;">
            <img src="../images/retangulo_tri_vd2.png" alt="" width="100%" border="0">
            &nbsp;&nbsp;&nbsp;Durante muito tempo o gás natural era “persona non grata” na exploração de petróleo, pois exigia uma série de procedimentos de segurança que encareciam e complicavam as atividades de extração. Mas, a
            partir dos anos 1980, o consumo entrou em expansão e o gás natural transformou-se em uma das fontes de energia fóssil a registrar maior crescimento no mundo.
        </div>
            </div>
    </div>
</div>

Answer 1

您需要将图像放在 div 中，以便文本能够“看到”它应该从哪里开始。您可以在 div 上使用 overflow: visible; 以允许图像在 div 之外呈现。

编辑:我让它工作，但是当 div 设置为列模式时会出现问题。 http://jsfiddle.net/D2zmV/1/

编辑2:第二个版本，使用背景图像来扩展被切断的部分。 (感谢 Alexander Lozada 的提示) http://jsfiddle.net/cU82S/1/