CSS：阻止 div 和 img 重叠答案

【问题标题】：CSS: Stop div and img from overlappingCSS：阻止 div 和 img 重叠
【发布时间】：2013-07-27 02:04:03
【问题描述】：

我有一个图形，里面有一个 img 浮动到右侧和一个 div。
我的html是

<div>
<figure id="fig">
<img src="img.jpg"></img>
<figcaption>Caption</figcaption>
</figure>
<div id="inner">
Blah Blah Blah
</div>
</div>

我的 div css 是

#inner{
text-align: center;
width: 70%;
margin: auto;
padding: 1% 5%;
}

我的图形css是

#fig{
width:162px;
height:277px;
margin:auto 7px auto 7px;
float:right;
}

而我的 img css 是

img{
width:162px;
height:277px;
}

我的 div 在图下方。问题是 div 的宽度是 70%，如果图形出现在它前面，它不知道。我希望 div 占空间的 70% - 数字。

【问题讨论】：

您能否发布一些更完整的代码、该部分的完整 css 和您的 html

标签： css image html overlapping figure

【解决方案1】：

从#inner div 中删除宽度，并在其右侧设置一个边距，即 figure 的全宽（边距 + 填充 + 宽度 + 等）。 figure 将浮动到 #inner 的右边距。由于 DIV 是块级元素，它们默认占用 100% 的宽度。

http://jsfiddle.net/kacH7/

CSS

#fig {
     width: 162px;
     height: 277px;
     float: right;
     margin: auto 7px;
}
#inner {
     text-align: center;
     padding: 1% 5%;
     margin-right: 176px;
     background-color: red; /* demonstration only */
}
img {
     width: 162px;
     height: 277px;
}

【讨论】：