html - 为什么我的元素没有以正确的方式 float ？

Question

这是我的网站:

http://violetoeuvre.com/

我很困惑为什么我的代码没有按照我想要的方式运行。我希望侧边包装 (side_nav_wrapper) 位于页面的左侧，左边距约为 200 像素。当我没有指定 float 时这有效。 (如果我指定 float:left; 它不应该工作吗？)

然后我希望照片框 (home_photo) float 到它的右侧。 (基本上它会从 Carmichael 中的 C 所在的位置开始)。但是，它一直被推到底部。各种 float 场景都试过了，想不通。

我希望文本框 (home_text) 位于照片框下方和侧边导航的右侧。为什么这不起作用!

(黑色和白色的顶部包装器工作正常)

提前致谢。这是我的 CSS:

/* Wrapper - Main *********/

.top_wrapper{ 
        display:block;
        background: rgba(0,0,0,1);
        width:100%;
        height: 200px;
        margin-top: 0px;
}

.top_emma {
    float:left;
    width:600px;
    height: 100px;
    padding-left: 100px;
    padding-top: 121px;
}

/* Top Navigation *********/

.wrapper_nav_box { 
        float: left;
        width:686px;
        height: 200px;
        background-color: rgba(255,255,255,0);
        margin-left: 10px;
}

.nav_box_l {
    display: block;
    float:left;
    width:247px;
    text-align: right;
    padding-top: 169px;
}

.nav_box_m {
    display: block;
    float:left;
    width:165px;
    text-align: center;
    padding-top: 169px;
}

.nav_box_r {
    display: block;
    float:left;
    width:219px;
    text-align: left;
    padding-right: 40px;
    padding-top: 169px;
}

/* Side Navigation ***********************/

.side_nav_wrapper {
        display:block;
        background: rgba(255,255,0,.5);
        width:200px;
        height: 2000px;
        margin-left: 104px;
}

.side_nav_about {
        display:block;
        float:left;
        background: rgba(255,0,255,.5);
        width:200px;
        height: 100px;
}

.side_nav_writing {
        display:block;
        float:left;
        background: rgba(0,255,255,.5);
        width:200px;
        height: 200px;
}

.side_nav_contact {
        display:block;
        float:left;
        background: rgba(100,255,255,.5);
        width:200px;
        height: 200px;
}
/* Photo Box on Home Page ************************/

.home_photo { 
        display:block;
        float: right;
        width: 980px;
        height: 400px;
        background: rgba(0,0,255, .5);
        margin-left: 322px;

}

/* Text Box on Home Page */

.home_text{ 
        display:block;
        background: rgba(255,255,255,0);
        width:980px;
        height: 250px;
        margin-left: 322px;

}

和 html:

<div class="top_wrapper">

<!-- Top _____________________________________________________-->

    <div id="emma_home" class="top_wrapper">
            <div class="top_emma">
                <a href="index.html">Emma Carmichael</a>
            </div>

        <!--- Top Navigation Menu ______________________________________________-->

        <div class="wrapper_nav_box">
            <div class="nav_box_l" id="nav_menu">
                <a href="writing.html">WRITING  |</a> 
            </div>
            <div class="nav_box_m" id="nav_menu">
                <a href="http://tumblr.com">BLOG  |</a>
            </div>
            <div class="nav_box_r" id="nav_menu">
                <a href="contact.html">CONTACT</a>
            </div>
        </div>
    </div>

<!-- Side Navigation__________________________________-->
    <div class="side_nav_wrapper">
        <div class="side_nav_about">about</div>
        <div class="side_nav_writing">writing</div>
        <div class="side_nav_contact">contact</div>
    </div>
<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; the theme of her thesis about contextualizing female rappers, “XXX,” was prescient of her interest in writing about women in the media at The Awl and elsewhere. A point guard for Vassar’s Basketball team from 2006 – 2008, Carmichael has also explored sports writing and women in sports as a writer and then editor at Deadspin.com, a child of Gawker Media. From March 2012 to March 2013, Emma was the managing editor of Gawker.com, a new position at the site; she currently holds the position of Managing Editor at Deadspin.com.
    </p>
    </div>

Answer 1

编辑:

现在我想起来了，您可能忘记关闭 top_wrapper，因为您的布局似乎在某处缺少关闭的 div 标记。因此，“快速修复”是按照我在下面的建议进行操作，但实际上您应该先尝试验证您的 HTML。

由于 side_nav_wrapper 被放置在 inside top_wrapper (可能要重新考虑这个)，你需要添加一个 float: left 到 top_wrapper 以及让侧边栏按照您希望的方式向左浮动。

.top_wrapper{
display: block;
background: rgba(0,0,0,1);
width: 100%;
height: 200px;
margin-top: 0px;
float: left;
}