インライン ブロックの使用
あなたはこれを試すかもしれません:
.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;
が、すべての画像ブロックの高さが同じであると想定されます。