下面的代码给出了这个结果:
除了三个事实之外,这与我想要的结果非常接近:
- 为什么图片底部有一个非常奇怪的灰色区域?
- 如何让橙色div延伸到图片底部?我尝试了
height: 100%
但没有成功... - 如何在文本和图片的 div 之间留出 10 像素的空间?
期望的结果:
div.div1 {
background-color: yellow;
border: 1px solid black;
padding: 10px;
overflow: auto;
}
div.div2 {
border: 1px solid gray;
float: right;
}
div.div3 {
background-color: orange;
border: 1px solid gray;
height: 100%;
padding: 10px;
}
<div class="div1">
<div class="div2">
<img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
</div>
<div class="div3">
Text about flowers
</div>
</div>
最佳答案
div.div1 {
display: flex; /* 1 */
padding: 10px;
overflow: auto;
background-color: yellow;
border: 1px solid black;
}
div.div2 {
order: 1; /* 2 */
border: 1px solid gray;
}
div.div3 {
flex: 1; /* 3 */
margin-right: 10px;
padding: 10px;
/* height: 100% */ /* 4 */
background-color: orange;
border: 1px solid gray;
}
img {
vertical-align: bottom; /* 5 */
}
<div class="div1">
<div class="div2">
<img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
</div>
<div class="div3">
Text about flowers
</div>
</div>
注释:
- 建立 flex 容器。默认情况下,子项将排成一行 (
flex-direction: row
),高度相等 (align-items:stretch
)。 - 使图像在视觉显示中显示在最后(所有 Flex 元素的默认
order
值为0
) - 使橙色框占用该行中的所有可用空间。
- 删除 flex 元素上定义的高度。它们将覆盖
align-items
等高功能。 - Mystery white space underneath image tag
关于html - CSS - div 扩展高度以匹配同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42701374/