[英]why the margin top doesn't work?
<div class="right">
<div class="category-nav">
<h2>test</h2>
<ul class="item-list">
<li><a href=#">example</a></li>
<li><a href=#">example</a></li>
<li><a href=#">example</a></li>
<li><a href=#">example</a></li>
<li><a href=#">example</a></li>
</ul>
</div>
<div class="list-content-img"><img src="img_148.jpg" /></div>
the style: 样式:
.right{
float: right;
}
.category-nav {
border: 1px solid #92D5ED;
float: right;
padding: 1px;
width: 316px;
}
.category-nav ul.item-list {
float: right;
margin-bottom: 8px;
overflow: hidden;
}
.list-content-img {
height: 148px;
margin-top: 10px;
width: 320px;
}
why the margin-top: 10px
in the list-content-img
doesn't work? 为什么
margin-top: 10px
list-content-img
中的margin-top: 10px
不起作用? what's the better way to layout the html structure and do the css? 什么是布局HTML结构和CSS的更好方法? thank you
谢谢
In between div category-nav and list-content-img create a empty div and give it property clear:both to clear the floats. 在div category-nav和list-content-img之间,创建一个空div并将其属性clear:both都清除浮点数。
Here is the fiddle http://jsfiddle.net/BNmwz/ 这是小提琴http://jsfiddle.net/BNmwz/
On category-nav you have float:right;
在类别导航上,您具有
float:right;
on list-content-img no float is specified. 在list-content-img上,未指定浮点数。
float:none
: The element is not floated, and will be displayed just where it occurs in the text. float:none
:元素不会浮动,并且会显示在文本中刚出现的位置。 This is default. 这是默认值。
if you add float:right
to list-content-img your margin works : 如果将
float:right
添加到list-content-img,则保证金有效:
First of all: You missed a for first div. 首先:您错过了第一个div。 If I suppose you close the first div and the end of all elements, you have to add the position:absolute;
如果我假设您关闭所有元素的第一个div和结尾,则必须添加position:absolute;。 to .list-content-img and set the margin-top : 10px;
到.list-content-img并设置margin-top:10px; for .category-nav ul.item-list
用于.category-nav ul.item-list
.right
{
float: right;
}
.category-nav
{
border: 1px solid #92D5ED;
float: right;
padding: 1px;
width: 316px;
}
.category-nav ul.item-list
{
margin-top: 10px;
float: right;
margin-bottom: 8px;
overflow: hidden;
}
div.list-content-img
{
position : absolute;
margin-top: 250px;
width: 320px;
background-color:Gray;
}
<div class="right">
<div class="category-nav">
<h2>
test</h2>
<ul class="item-list">
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
<li><a href="#">example</a></li>
</ul>
</div>
<div class="list-content-img">
<img src="img_148.jpg" /></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.