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;
}

float を使用する代わりに、 を使用します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高さが 290 ピクセルになることがわかっている場合は、絶対配置を使用して画像コンテナーを親.produto-imgブロックの下部に配置し、h2要素を下部から 290 ピクセル離して配置できます。

参照: http://jsfiddle.net/audetwebdesign/KpCzK/

インライン ブロックとフロートのどちらを選択するかは、liブロックをどのように並べるか、上に不規則なスペースを配置するか、下に不規則なスペースを配置するかによって大きく異なります。これは設計上の決定です。

display: table-cellコンテンツをブロック レベル要素の幅でラップする場合、解決策は可能ですdisplay: table-cell; vertical-align: bottom;が、すべての画像ブロックの高さが同じであると想定されます。

于 2013-09-10T18:09:27.350 に答える