使用css </p>放大<p>标签边框和图像背景

Question

是否可以使用css增加大图像周围的段落边框和背景？ 我必须放大盒子的大小，而不是缩放图像。

我的css在单独的文件中，我不想触摸HTML代码。那么可以通过编辑 css吗？

来实现

以下是示例：

每个人都可以发现＆＃34;大图像测试＆＃34;盒子应该更大。以下是例外结果的示例：

现在只需添加<br> - 标记即可完成。是否可以使用css来完成这项工作。

以下是我的css文件的一部分：

p {
    background-color: #CCC;
    border: 2px solid black;
    text-align: left;
    padding: 5%;
 }

p img {
    float: right;
    clear: right;
    padding: 5px;
    margin-right: 0px;
    border: 0.5em groove white;
}

以下是＆＃34;阻止＆＃34;：

的html代码

<h3>Big Image Test</h2>
<p>
    I have a BIG image
    <img width="500" height="500" src="qr.png" alt="image"/>
</p>

Answer 1

将p标记的pss更改为：

p {
    background-color: #CCC;
    border: 2px solid black;
    text-align: left;
    padding: 5%;
    overflow:hidden;
 }

这对我来说有点违反直觉，我偶然发现它没有想到它会在试图解决这个问题时发挥作用，但似乎有效...... 有人可以解释为什么指定溢出到这样的隐藏行为？！

请参阅fiddle

Answer 2

您没有为浮动元素预留空间：

<p>
    I have a BIG image
    <img width="500" height="500" src="qr.png" alt="image"/>

    <div style='clear:both;'></div>

</p>