Question

我有许多带有静态高度的图像标题和下面的文字。目标是将.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>

Answer 1

我对您的代码进行了一些调整，我添加了一个班级table-div和一个班级table-row，并将div.outer包裹在div.table-div和div.table-row中。你可以在这里看到它：http://codepen.io/anon/pen/XboROq?editors=110。我希望这就是你要找的东西。

Answer 2

这里必不可少的是vertical-align：top;我给出了固定的宽度，但你可以给出宽度百分比。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

获取父空格

2 个答案: