Question

下面的HTML :(但JSfiddle有HTML和CSS）

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="top1">
        <div class="top1-left">
            Welcome, Guest
            <a href="https://www.google.ca">Login</a>
            <a href="https://www.google.ca">Sign up</a>
        </div>
        <div class="top1-right">
            Stay Updated
            <a href="https://www.google.ca">Subscribe via RSS</a>
            <a href="https://www.google.ca">Email Updates</a>
        </div>
    </div>

    <div class="top2">
        <div class="top2-text">
            <span style="font-size:40px;">My Blog</span>
            <span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
        </div>
    </div>

    <div class="top3">
        <div class="top3-text">
            <span style="font-size:20px; margin-right: 40px;">HOME</span>
            <span style="font-size:20px; margin-right: 40px;">ABOUT</span>
            <span style="font-size:20px; margin-right: 40px;">BLOG</span>
            <span style="font-size:20px; margin-right: 40px;">CONTACT</span>
        </div>
    </div>

</body>

</html>

https://jsfiddle.net/fsf90593/

我的问题是为什么＆＃34; top3＆＃34; div不像其他div那样漂浮在左边？我几乎拥有该div的css和html代码。可能是一个简单的答案，但我对html css世界很新，请帮忙。

Answer 1

尝试在 div.top3-text

上添加clear: both;

CSS：

div.top3-text {
   float: left;
   line-height: 70px;
   padding-left: 60px;
   clear: both;
}

它会在 top2-text 之后清除 top3-text ，并允许它显示在 top2-text

之下

Answer 2

试试这个：只需在课程中添加一个div＆＃39; clear＆＃39;并且该类具有＆＃39; clear的风格：两者＆＃39;

＆＃13;

div.top1{
    background-color: darkgreen;
    height: 40px; 
}
div.top1-left{
    float: left;
    padding: 10px 0px 5px 60px;
    color: white;
}
div.top1-right{
    float: right;
    padding: 10px 30px 5px 0px;
    color: white;
}

div.top2{
    background-color: #247424;
    height: 150px;
}

div.top2-text{
    float: left;
    color: white;
    padding-left: 60px;
    line-height: 150px;
}

div.top3{
    height: 70px;
    background-color: #81EE81;
}
div.top3-text{
    float: left;
    line-height: 70px;
    padding-left: 60px;
}

a{
    color: #82B62E
}

.clear{
  clear: both;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="top1">
        <div class="top1-left">
            Welcome, Guest
            <a href="https://www.google.ca">Login</a>
            <a href="https://www.google.ca">Sign up</a>
        </div>
        <div class="top1-right">
            Stay Updated
            <a href="https://www.google.ca">Subscribe via RSS</a>
            <a href="https://www.google.ca">Email Updates</a>
        </div>
    </div>

    <div class="top2">
        <div class="top2-text">
            <span style="font-size:40px;">My Blog</span>
            <span style="font-size:20px; margin-left: 40px;"> Description of My Blog</span>
        </div>
    </div>
   
   <div class="clear"></div>
    <div class="top3">
        <div class="top3-text">
            <span style="font-size:20px; margin-right: 40px;">HOME</span>
            <span style="font-size:20px; margin-right: 40px;">ABOUT</span>
            <span style="font-size:20px; margin-right: 40px;">BLOG</span>
            <span style="font-size:20px; margin-right: 40px;">CONTACT</span>
        </div>
    </div>

</body>

</html>

＆＃13;

简单的HTML，与float的奇怪对齐似乎不起作用

2 个答案: