Question

这是我的第一个问题，所以请耐心等待，谢谢。

我正在使用wordpress制作网站。我有div包含左边的图像和右边的一些段落的内容。透明框的背景有文字的高度（较短），并在图像的中间（左边）结束。

这是我的代码：

<div class="transparent-box">
  <img class="alignleft" src="img/img.jpg" width="480" height="319" />
  <div class="tr-text">
    <p>some text</p>
  </div>
</div>

并且style.css：

img.alignleft {
  float: left;
  margin-right: 30px;
}

.transparent-box {
  background: rgba(255,255,255,0.5);
  margin-top: 20px;
}

p {
line-height: 1.34;
margin-bottom: 14px;
font-size: 15px;

}

如果我用过它并没有帮助我。我认为这个问题很容易找到解决方案，但我尝试了很多方法都没有用。我试过透明盒自动或100％高度，但它也没有用。

非常感谢你！

Answer 1

希望这是你想要的： Demo

HTML：

<div class="transparent-box">
    <img class="alignleft" src="img/img.jpg" width="480" height="319" />
    <div class="tr-text">
        <p>some text</p>
    </div>
    <div class="clear"></div>
</div>

CSS ::

.clear{
    clear:both;        
}

float您有img。因此，您需要清除float属性以获得全高

Answer 2

为display:inline-block添加.transparent-box？

Answer 3

另一种解决方案:)： Demo

overflow: hidden

这导致与K.B.M的解决方案相同的效果。

包装div不接受图像高度

3 个答案: