css - CSS：阻止 div 和 img 重叠

Question

我有一个图，里面有一个 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% - 数字。

Answer 1

从#innerdiv 中删除宽度并在其右侧设置一个边距，即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;
}