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

和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

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

Answer 3

另一个解决方案:): Demo

overflow: hidden

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

环绕 div 不接受图像高度

Wrapping div doesn't accept image height

html

css

wordpress

alignment