6

我有这个动态重复的 li，在 3 列和不同的行中对齐。

<li class="produto-ind">

            <h2>
                Lorem ipsum dolor sit amet
            </h2>

            <div class="img-produto-ind">
                <div class="fk-img"></div>
            </div>

</li>

h3 中的文本并不总是相同，这就是问题所在。

看一下这个：

http://jsfiddle.net/2vpMP/1/

如您所见，第一个 li 的文本比其他的多。当文本的行中断时，它会迫使 div.fk-img 下降，从而弄乱对齐方式。

我的问题是：如果有换行符，是否可以使文本向上移动？

4

3 回答 3

1

使用内联块

你可以试试这个：

.produto-ind {
    xxposition: relative;
    width:300px;
    height:400px;
    xxfloat: left;
    margin:50px 30px 0px 0px;
    border: 1px dotted blue;
    display: inline-block;
}

不要使用浮点数，而是使用display: inline-block. 文本块将与其底部基线对齐。

还有其他与 div 高度相关的小问题，但可以修复，特别是如果您知道.fk-img.

请参阅http://jsfiddle.net/audetwebdesign/2vpMP/12/上的演示

使用花车

如果您知道图像容器的高度，也可以使用浮点数：

.produto-ind .img-produto-ind {
    height:290px;
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.produto-ind h2 {
    background-color: yellow;
    position: absolute;
    bottom: 290px;
}
.produto-ind .fk-img {
    height:100%;
    width:auto;
    background-color:gray;
}

在这种情况下，如果您知道.fk-img将是 290px 高度，则可以使用绝对定位将图像容器放置在父.produto-img块的底部，然后将h2元素定位到离底部 290px 的位置。

见：http: //jsfiddle.net/audetwebdesign/KpCzK/

内联块和浮动之间的选择很大程度上取决于您希望li块如何排列，顶部的参差不齐的空间或底部的参差不齐的空间，这取决于您的设计决定。

display: table-cell如果您将内容包装在块级元素宽度周围，则可以使用解决方案，display: table-cell; vertical-align: bottom;但这也将假定所有图像块具有相同的高度。

于 2013-09-10T18:09:27.350 回答
0

尝试这个：

h2 {height:80px; display:table-cell; vertical-align:bottom;}
于 2013-09-10T18:43:46.463 回答
0

使用这种格式：-

    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell; width:300px;">csdcs<br /><br /></div>
            <div style="display: table-cell;width:300px;">Row 1, Cell 1</div>
            <div style="display: table-cell;width:300px;">Row 1, Cell 1</div>
        </div>
        <div style="display: table-row;">
            <div style="display: table-cell;width:300px;">Row 2, Cell 1</div>
            <div style="display: table-cell;width:300px;">Row 2, Cell 1</div>
            <div style="display: table-cell;width:300px;">Row 2, Cell 1</div>
        </div>
    </div>

它会工作..

在这种情况下，您可以生成<span>标签，而不<li>需要创建任何额外的 CSS

<style>
    #main_div{display: table;}
    #sec_div{display: table-row;}
    #span_generate{ table-cell; width:300px;/*whatever width you wanna give*/}
</style>

http://jsfiddle.net/aasthatuteja/cCEFs/

于 2013-09-10T18:11:33.173 回答