我有很多元素带有静态高度的图像标题和下面的一些文本。目标是获取 .outer 的全高作为行中的元素。我需要该文本来使图像的宽度和高度尽可能完整。
This is what i have achieved at the moment .
CSS:
.outer {
display: inline-block;
}
.inner {
background: green;
display: table-caption;
}
.inner>img{
height: 200px;
}
HTML:
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg"/>
<p>Useless Text.</p>
</div>
</div>
最佳答案
这里最重要的是vertical-align:top;我给出了固定宽度，但您可以按百分比给出宽度。
body {
width: 100%;
}
.outer {
display: inline-block;
width: 90%;
}
.inner {
display: inline-block;
vertical-align: top;
background: green;
width: 290px!important;
padding-right: 20px;
padding-left: 15px;
}
.inner>img {
height: 200px;
}
.inner>p {
width: inherit;
}
.inner>img,
.inner>p {
display: block;
}<body>
<div class="outer">
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>This is an awesome text, but i want my element get height of left space up of my image.</p>
</div>
<div class="inner">
<img src="https://pp.vk.me/c322418/v322418480/131a7/c3HrxpJiYqY.jpg" />
<p>Useless Text. CSS is not an overly complex language. But even if you’ve been writing CSS for many years, you probably still come across new things — properties you’ve never used, values you’ve never considered, or specification details you never
knew about. In my research, I come across new little tidbits all the time, so I thought I’d share some of them in this post. Admittedly, not everything in this post will have a ton of immediate practical value, but maybe you can mentally file
some of these away for later use.</p>
</div>
</div>
</body>关于html - 获取父空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31762665/