CSS：停止div和img重叠

我有一个img内部它浮动到右侧和一个div的图。
我的HTML是CSS：停止div和img重叠

<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是在fi下古尔。问题是div的宽度是70％，如果数字出现在它前面，它不知道。我希望div是70％的空间 - 这个数字。

来源

2013-07-26 usama8800

显示您的HTML代码。 – 2013-07-26 17:31:52

你可以发布一些更完整的代码，你的完整的CSS和该部分的HTML – samrap

从您的#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; 
}

来源

2013-07-26 17:55:21 hungerstar

CSS：停止div和img重叠

回答

相关问题