Question

这是我的网站：

我很困惑为什么我的代码没有按照我想要的方式运行。我希望侧包装器（side_nav_wrapper）位于页面的左侧，左边距约为200px。这在我没有指定浮点数时有效。（如果我指定float：left;？）

，它不应该工作

然后我想将照片框（home_photo）浮到右边。（基本上它将从Carmichael的C开始）。但是，它一直被推到谷底。我已经尝试了各种浮动场景，但无法弄明白。

我希望文本框（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位于内 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; }

为什么我的元素不正确地浮动？

1 个答案: