发表新帖
发表新帖

br clear=“all” vs css solution

前端 未结
关注
5 974
隐瞒了意图╮
隐瞒了意图╮ 2021-01-11 17:27

I have a div that is float:left, and after the div is the rest of the page. In order to keep the rest of the page below the div, I must first place a
相关标签:
5条回答
  • 清酒与你
    2021-01-11 17:52

    I usually wrap another div around the floating div, with style overflow: auto

    0 讨论(0)
  • 鱼传尺愫
    2021-01-11 18:03

    after the div you've floated. add the following code.

    <div style='clear:both'></div>

    then continue the rest of the page as usual.

    0 讨论(0)
  • 隐瞒了意图╮
    2021-01-11 18:03 
    <!DOCTYPE html>
    <html>
    <link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
    <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        body {
        margin: 0;
        padding: 0;
        background-color: #EFEFEF;
        font-family: sans-serif;
    }

    .homepage-window {
        height: 100vh;
        display: flex;
    }

    .nav-bar {
        width: 18%;
        background-color: #2E3E4E;
    }

    .bar-manager {
        width: 100%;
    }

    .top-bar {
        display: flex;
        align-items: center;
        height: 7%;
        width: 100%;
        background-color: white;
        border-bottom: 0.5px solid lightgrey;
    }

    .top-bar p {
        margin-left: 10px;
        font-weight: lighter;
    }

    .bottom-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 9%;
        width: 100%;
    }

    .bottom-bar h1 {
        margin-left: 10px;
        font-weight: normal;
        font-size: 12px;
    }
    </style>
    <head>
        <title>Cold-Ops Homepage</title>
    </head>
    <body>
        <div class="homepage-window">
            <div class="nav-bar">   
            </div>
            <div class="bar-manager">
                <div class="top-bar">
                    <p>Homepage</p>
                </div>
                <div class="bottom-bar">
                    <h1>Welcome, Omard2000</h1><br>
                    <p>some text</p>

                </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    0 讨论(0)
  • 不要未来只要你来
    2021-01-11 18:07

    On the next item you can use the style clear:left.

    Another alternative is to set the overflow style on the parent of the floating element to make it contain it, like overflow:hidden.

    0 讨论(0)
  • 情话喂你
    2021-01-11 18:15

    Create a class and insert into CSS:

    br.cb { clear: both; }

    Insert into HTML:

    <br class="cb">

    This made it past W3 markup and CSS validator.

    0 讨论(0)
 看不清?
提交回复
热议问题