Question

div元素的范围是什么。任何其他元素都可以使用div元素中未使用的空格吗？

在下面的示例中，continue reading块应显示在div（class =＆＃34; post_text＆＃34;）下方，但不会发生这种情况。请解释原因。我有这个代码

<!DOCTYPE html>
<html>
<head>
    <style>

        .content{
            background-color: #FF8000;
            overflow:hidden;
            width: 600px;
        }

        p span {
            background-color: #E8F827;
        }

        .post_text img{
            float: left;
        }

        .cnread {
            float: right;
        }


    </style>
</head>

<body>

    <div class="content" id="post">

        <div class="post_text">
            <img src="thumb.jpg" alt="">

            <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a 
            ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class 
            aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
        </div>

        <div>
            <a class="cnread" href="">Continue Reading</a>
        </div>
    </div>

</body>
</html>

这是输出

我想要这个输出

我想要continue reading以下。怎么做？

Answer 1

这是因为你有左图像漂浮。您需要清除内容，因此“继续阅读”将从新行开始。

这应该解决它

CSS

.content{
    background-color: #FF8000;
    overflow:hidden;
    width: 600px;
}

p span {
    background-color: #E8F827;
}

.post_text img{
    float: left;
}

.cnread {
    float: right;
}
.clear {clear: both;}

HTML

<div class="content" id="post">

    <div class="post_text">
        <img src="thumb.jpg" alt="">

        <p>Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a 
        ornare odio. Sed non  mauris vitae erat consequat auctor eu in elit. Class 
        aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos </p>
    </div>

    <div class='clear'>
        <a class="cnread" href="">Continue Reading</a>
    </div>
</div>

Answer 2

给＆＃34;继续阅读＆＃34; <div>一个类名，然后添加这个CSS：

    .classname {
        clear: both;
        text-align: right;
    }

此外，从锚

中删除float: right样式

块级元素出现在右侧而不是在其他div之下

2 个答案:

CSS

HTML