Question

我有这个动态重复的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/

正如您所看到的，第一个文本比其他文本有更多文本。随着文本行的中断，它会强制div.fk-img向下移动，弄乱对齐。

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

Answer 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;的解决方案。

Answer 2

使用此格式： -

    <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/

Answer 3

试试这个：

h2 {height:80px; display:table-cell; vertical-align:bottom;}

HTML CSS在换行时向上移动文本

3 个答案:

使用内联块

使用浮动