删除图像时，p取100％宽度

Question

我有一个带有段落和图片的div容器我希望段落宽度为100％仅当图片仅在此处删除时代码：

<div class="dynamicPageImageConstant">
    <img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
    <p> this is the paragraph</p>
</div>

.dynamicPageImageConstant {
    float: left;
    padding: 1px;
    width: 96%;
}
.dynamicPageImageConstant p {
    width: 100%;
}

当我这样做时，段落的文字落在图像上，其中一部分被隐藏了。我可以用CSS解决这个问题，还是需要jQuery？

这里有关于该问题的屏幕截图作为更多信息

Answer 1

我不确定这是否最合适，因为有点难以确定您之后的具体情况。但是您可以将规则应用于p标签按照img标记覆盖图片不存在时的默认值：

.DynamicPageImageContant p{ /* default p styling, e.g. with no image present */
    width: 100%;
}

.DynamicPageImageContant img + p{ /* p styling with image present */
    width: auto;
}

更新： Accepted code:

HTML

<h1>With Image</h1>

<p class="DynamicPageImageContant">
    <img alt="" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTn_KAfHdyEKDpeGIJixdWvr_gvONoL3Pyp8P4VzyAXA3ILs0_r" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>

<h1>Without Image</h1>

<p class="DynamicPageImageContant">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel pellentesque urna. Fusce euismod, est eget tristique mattis, arcu nibh gravida nisi, ac feugiat dui lorem id sem. Sed quis fringilla nisl, ac dignissim mi. In hac habitasse platea dictumst. Integer elementum nibh eget mi malesuada ornare. Vestibulum ultrices tortor eget suscipit volutpat. Pellentesque venenatis odio sit amet est adipiscing, nec sollicitudin massa luctus. Sed tempor nibh vel pellentesque dictum. Nam porttitor laoreet bibendum.</p>

CSS

.DynamicPageImageContant img {
    float:right;
    margin:0 5px 5px 0;
}
.DynamicPageImageContant p {
    display:inline;
}

Answer 2

此代码可以完成这项工作：

<div class="dynamicPageImageConstant">
    <img alt="" src="/Upload/Images/DynamicImages/Subsea Package.jpg">
    <p> this is the paragraph</p>
</div>

<style>
.dynamicPageImageConstant {
   width: 100%;
padding: 1px;
}
.dynamicPageImageConstant p, .dynamicPageImageConstant img {
    display: inline-block;
width: auto;
} 
</style>