Question

我正在创建一个基本的投资组合网页。我已经成功创建了侧边栏，还有英雄形象。应该在英雄形象下方的两个div显示在它的右侧。

HTML

<div id="wrap">

        <div id="side-bar-left">

            <div id="contents-left">

                <div id="overlay">

                    <p id="logo">CS</p>

                    <hr class="mini-underline">

                    <div id="links-container">

                        <a class="link" href="#">Welcome</a><br>
                        <a class="link" href="#">Project One</a><br>
                        <a class="link" href="#">Project Two</a><br>
                        <a class="link" href="#">Project Three</a><br>
                        <a class="link" href="#">Contact</a><br>

                    </div>

                    <img id="setting-icon" src="img/settings.png" onclick="openSettings()">

                    <div id="settings-container">

                        <img src="img/arrow.png" id="arrow-icon" onclick="closeSettings()">

                        <p id="ss-button" onclick="removeSS()">Smooth Scroll</p>
                        <p id="hs-button" onclick="hideSB()">Hide Sidebar</p>

                    </div>

                </div>

            </div>

        </div>

            <div id="hero">

                <div id="hero-overlay">

                </div>

            </div>

        <div id="picture-box">

            <div id="picture-container">

                <div id="picture-overlay">

                </div>

            </div>

        </div>

        <div id="project-one-container">

        </div>

    </div>

CSS

#wrap {
    width: 100%;
    height: auto;

    display: -ms-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;

    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
}

/* ####################### Sidebar stuff ####################### */

    #side-bar-left {
        width: 150px;
        background-color: white;
        -ms-flex: 0 150px;
        -webkit-box-flex:  0;
        -moz-box-flex:  0;
        -ms-box-flex:  0;
        box-flex:  0;  
    }

        #contents-left {
            position: fixed;
            top: 0;
            left: 0;

            height: 100vh;
            width: 150px;
            background-color: white;

            overflow: hidden;

            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

            #overlay {
                width: 150px;
                height: 0px;

                background-color: rgba(56, 56, 56, 0.7);
            }

/* ####################### Content area ####################### */

/* ####################### Hero image ####################### */

    #hero {
        width: 100%;
        height: 50vh;
        display: flex;
        justify-content: center; /* align horizontal */
        align-items: center;

            background-image: url("img/swirl_pattern.png");
            background-attachment: fixed;
    } /* rgb(27, 188, 155);*/

        #hero-overlay {
            width: 100%;
            height: 50vh;

            background-color: rgba(27, 188, 155, 0.8);
            display: flex;
            justify-content: center; /* align horizontal */
            align-items: center;
        }

    #picture-box {
        height: 25vh;
        width: 100%;

        background-color: #ecedec;
        float: left;
    }

        #about-container {
            width: 600px;
            height: 400px;

            background-color: black;
            margin-right: auto;
            margin-left: auto;
        }

            #picture-container {
                height: 250px;
                width: 250px;

                border-radius: 50%;
                background-color: white;
            }

                #picture-overlay {
                    No styling as of yet
                }

/* ####################### Project one page ####################### */

    #project-one-container {
        width: 100%;
        height: 150vh;

        background-color: red;
    }

What it's supposed to look like

What it looks like now (wrong)

Answer 1

在这种情况下你必须将树放在一个div中，现在你只需要看边距和填充你想要的方式

   
  body{
     margin:0px;
   }

  #wrap {
    width: 100%;
    height: auto;
    display: flex;

    /*display: -ms-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;

    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;*/
}

/* ####################### Sidebar stuff ####################### */

    #side-bar-left {
        width: 182px;
        background-color: white;
        -ms-flex: 0 150px;
        -webkit-box-flex:  0;
        -moz-box-flex:  0;
        -ms-box-flex:  0;
        box-flex:  0;  
    }

        #contents-left {
            position: fixed;
            top: 0;
            left: 0;

            height: 100vh;
            width: 150px;
            background-color: white;

            overflow: hidden;

            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

            #overlay {
                width: 150px;
                height: 0px;

                background-color: rgba(56, 56, 56, 0.7);
            }

/* ####################### Content area ####################### */

/* ####################### Hero image ####################### */

    #hero {
        width: 100%;
        height: 50vh;
        display: flex;
        justify-content: center; /* align horizontal */
        align-items: center;

            background-image: url("img/swirl_pattern.png");
            background-attachment: fixed;
    } /* rgb(27, 188, 155);*/

        #hero-overlay {
            width: 100%;
            height: 50vh;

            background-color: rgba(27, 188, 155, 0.8);
            display: flex;
            justify-content: center; /* align horizontal */
            align-items: center;
        }

    #picture-box {
        height: 250px;
        width: 100%;

        background-color: #ecedec;
        /*float: left;*/
    }

        #about-container {
            width: 600px;
            height: 400px;

            background-color: black;
            margin-right: auto;
            margin-left: auto;
        }

            #picture-container {
                height: 250px;
                width: 250px;

                border-radius: 50%;
                background-color: white;
            }

                #picture-overlay {
                    No styling as of yet
                }

/* ####################### Project one page ####################### */

    #project-one-container {
        width: 100%;
        height: 150vh;

        background-color: red;
    }
   .test{
       width: 100%;
    }

<div id="wrap">

        <div id="side-bar-left">

            <div id="contents-left">

                <div id="overlay">

                    <p id="logo">CS</p>

                    <hr class="mini-underline">

                    <div id="links-container">

                        <a class="link" href="#">Welcome</a><br>
                        <a class="link" href="#">Project One</a><br>
                        <a class="link" href="#">Project Two</a><br>
                        <a class="link" href="#">Project Three</a><br>
                        <a class="link" href="#">Contact</a><br>

                    </div>

                    <img id="setting-icon" src="img/settings.png" onclick="openSettings()">

                    <div id="settings-container">

                        <img src="img/arrow.png" id="arrow-icon" onclick="closeSettings()">

                        <p id="ss-button" onclick="removeSS()">Smooth Scroll</p>
                        <p id="hs-button" onclick="hideSB()">Hide Sidebar</p>

                    </div>

                </div>

            </div>

        </div>
<div class="test">

          <div id="hero">

                <div id="hero-overlay">

                </div>

            </div>

        <div id="picture-box">

            <div id="picture-container">

                <div id="picture-overlay">

                </div>

            </div>

        </div>

        <div id="project-one-container">

        </div>
</div>
    </div>

Flexbox：Divs彼此相邻而不是下方

1 个答案: