これは不可能かもしれないと感じていますが、誰かが私が間違っていることを証明してくれることを願っています.
高さが固定されていない親要素があります (そうである可能性はありますが、役に立たないと思います)。その中には、垂直に積み重ねられた 2 つの子があります。最初のアイテムの高さは不明です。残りの高さを 2 番目のアイテムで占めたいと思います。
HTML:
<div class="container">
<a class="snippet" href="#">
<img class="example-image" src="example-image.png">
<div class="snippet-text-section">
<div class="snippet-title">Title for the item - could be one or two lines long</div>
<div class="snippet-text">Rest of the text, filling the remaining space.</div>
</div>
</a>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
.container{
position:relative;
}
.snippet {
display: block;
border-radius: 5px;
background-color: #ddd;
color:black;
overflow:hidden;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
height:100px;
}
.example-image {
width: 100%;
background-color: #111;
}
.date {
position: absolute;
top: -20px;
background-color: #1b1f52;
font-weight: bold;
padding:0px 2px;
color: white;
}
.snippet-text-section {
padding: 0px 20px 20px 0px;
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.snippet-title {
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
background-color: rgba(255,0,0,0.8);
color: white;
padding: 0 5px;
border-radius: 0px 5px 0px 0px;
}
.snippet-text {
font-size: 20px;
line-height: 25px;
background-color: rgba(0,0,255,0.8);
color: white;
height: 100%;
padding: 0 5px;
border-radius: 0px 0px 5px 5px;
}
ここで多くの投稿を見てきたことに注意してください。最も類似したものは、水平レイアウトを持つ子 div を扱います。私が解決策(および現在使用しているもの)に最も近いのは、最初の子の高さを強制している 100% 高さ div 内の 2 つの垂直 divですが、理想的ではありません。
私が見逃したテーブルレイアウトの解決策があるかどうか、現在疑問に思っています...
更新2018 年になり、CSS3 のサポートはどこにでもあります。これに対する解決策を探しているなら、答えはフレックスボックスです。以下の Ktash の回答の 2 番目の部分を参照してください。