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/

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