0

这是我的网站：

http://violetoeuvre.com/

我很困惑为什么我的代码没有按照我想要的方式运行。我希望侧包装（side_nav_wrapper）位于页面的左侧，左边距约为 200 像素。这在我没有指定浮点数时有效。（如果我指定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>
4

1 回答 1

0

编辑：

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

由于side_nav_wrapper放置在内部 top_wrapper（可能需要重新考虑），因此您还需要添加一个float: lefttotop_wrapper以使侧边栏以您想要的方式向左浮动。

.top_wrapper{
display: block;
background: rgba(0,0,0,1);
width: 100%;
height: 200px;
margin-top: 0px;
float: left;
}
于 2013-03-26T14:58:28.507 回答