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

删除 #inner 的宽度div 并在其右侧设置一个边距，即 figure 的全宽(边距 + 填充 + 宽度 + 等)。 . figure将 float 到 #inner 的右边距.由于 DIV 是 block 级元素，它们默认占据 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;
}