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将浮动到#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;
}

CSS：停止div和img重叠

1 个答案: