Question

<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>

风格：

.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;
}

为什么margin-top: 10px中的list-content-img不起作用？什么是布局html结构和做css的更好方法？谢谢

Answer 1

在div category-nav和list-content-img之间创建一个空div并给它清除属性：两者都清除浮点数。

这是小提琴http://jsfiddle.net/BNmwz/

Answer 2

在 category-nav 上， list-content-img 上有float:right;，没有指定浮点数。

float:none：元素未浮动，将显示在文本中出现的位置。这是默认值。

如果您将float:right添加到 list-content-img ，您的保证金有效：

http://jsfiddle.net/8vRqH/1/

Answer 3

首先：你错过了第一个div。如果我假设你关闭了第一个div和所有元素的结尾，你必须添加位置：absolute;到.list-content-img并设置margin-top：10px; for .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>

为什么保证金顶部不起作用？

3 个答案: