在我的网站上,我正在创建文章网格。但是,我无法让容器元素遵守其中子元素的高度。您可以在此屏幕截图中看到容器比其中的内容高几个像素(点击放大):
现在,我总是可以设置一个固定的高度,但我宁愿不设置。图片的高度始终相同,但标题会有所不同,因此我希望容器能够灵活适应标题的高度。
CSS:
div.related-content-block:nth-child(2n+1) {
padding: 12.5px 12.5px 12.5px 0;
}
div.related-content-block a {
height: auto;
}
div.related-content-block a {
display: flex;
flex-direction: row;
width: 100%;
}
.m-pop-art-col-right {
padding: 0 0 0 10px;
}
.m-pop-art-title {
color: #464646;
font-size: 1.2em;
font-weight: 600;
line-height: 1.2em;
}
.related-content-footer .m-pop-art-date {
color: #898989;
}
HTML:
<div class="related-content-block">
<a href="/article/women/cosmetic-surgery-options-after-pregnancy" class="m-pop-art-container">
<div class="m-pop-art-col-left">
<div class="m-pop-art-img"><img typeof="foaf:Image" class="image-style-related-content" src="http://living.dev/sites/default/files/styles/related_content/public/field/image/mommymakeover.jpg?itok=leB4Cihe" width="110" height="110" alt="fit healthy mother holding baby "></div>
</div>
<div class="m-pop-art-col-right">
<div class="m-pop-art-title">Cosmetic Surgery Options After Pregnancy</div>
<div class="m-pop-art-date">Apr. 3, 2017</div>
</div>
</a>
</div>
这是我的代码的 JSFiddle:https://jsfiddle.net/8m3upb0o/
最佳答案
这两个也需要设置为inline-flex:
.m-pop-art-img,
.m-pop-art-col-left {
display: inline-flex;
}
更新 fiddle :https://jsfiddle.net/8m3upb0o/1/
关于html - Div 不考虑子元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43600894/