「.buttons-box」を「.blog-item」の下に移動する方法がわかりません。".blog-item" と {position: absolute;} に {position: relative;} を設定できます。下：0; 「.buttons-box」の場合は right:0} ですが、「.buttons-box」の幅を変更すると、「.content-box」とまったく同じ幅が必要になるため、問題は解決しません。幅を 100% に設定します。これは、相対的な親 (この場合は "blog-item") から幅を取得するためです。「.content-box」および「.text」として動的であるため、「div.buttons-box」の特定の幅をピクセル単位で設定できません。画像に応じて幅があり、この画像は「ブログ項目」ごとに異なるサイズにすることができます。
必要なもの:
- div ".buttons-box" を ".blog-item" の下部に移動しました
- 「.buttons-box」は「.content.box」と同じ幅でなければなりません
- 「.buttons-box」は「.text」の下にある必要があり、自分自身のプレースホルダーが必要です。これは、テキストが長すぎる場合、絶対位置がテキストの上にある場合
ありがとうございました！
画像サンプル: ttp://i.stack.imgur.com/6WfUm.jpg
JSFIDDLE のサンプルとデモ: http://jsfiddle.net/yjdEk/
編集: JSFIDDLE に関する私の考え: http://jsfiddle.net/RhShT/
- ボタンボックスのプレースホルダー「buttons-box-placeholder」を作成しました
- 「.content-box」には相対位置を設定し、「.buttons-box」には絶対位置を設定しました
幅と高さを設定するためのスクリプトが必要ですが、すべての.blog-itemが異なる可能性があるため、グローバルではない彼の親からのみです。
- .buttons-box 幅 = .content-box 幅
- .content-box の高さ = .blog-item の高さ