换行 div 不接受图像高度

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>

和风格.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

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

Answer 2

希望这是你想要的： 演示

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

:)的另一个解决方案：演示

overflow: hidden 

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