Html Div不考虑子元素的高度
在我的网站上,我正在创建一个文章网格。但是,我很难让容器元素尊重其中子元素的高度。在此屏幕截图中,您可以看到容器比其内部内容高出几个像素,单击以放大: 现在,我可以设定一个固定的高度,但我不想。图像的高度总是相同的,但标题会有所不同,所以我希望容器能够灵活地适应标题的高度 CSS: HTML:Html Div不考虑子元素的高度,html,css,flexbox,Html,Css,Flexbox,在我的网站上,我正在创建一个文章网格。但是,我很难让容器元素尊重其中子元素的高度。在此屏幕截图中,您可以看到容器比其内部内容高出几个像素,单击以放大: 现在,我可以设定一个固定的高度,但我不想。图像的高度总是相同的,但标题会有所不同,所以我希望容器能够灵活地适应标题的高度 CSS: HTML: 下面是我的一段代码:这两个代码也需要设置为内联flex: .m-pop-art-img, .m-pop-art-col-left { display: inline-flex; } 更新的fiddl
下面是我的一段代码:这两个代码也需要设置为内联flex:
.m-pop-art-img,
.m-pop-art-col-left {
display: inline-flex;
}
更新的fiddle:你是说图像下面的几个像素?
<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>
.m-pop-art-img,
.m-pop-art-col-left {
display: inline-flex;
}