0

これが私のウェブサイトです：

http://violetoeuvre.com/

なぜ私のコードが思い通りに動作しないのか混乱しています。サイドラッパー（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>
4

1 に答える 1

0

編集：

考えてみると、レイアウトのどこかに終了タグtop_wrapperがないように見えるので、おそらく閉じるのを忘れているでしょう。divしたがって、「迅速な修正」は、以下で推奨することを実行することですが、実際には、HTML最初に検証を試みる必要があります。

は内部side_nav_wrapperに配置されているため（これを再考する必要があるかもしれません）、サイドバーを希望どおりに左側にフロートさせるには、も追加する必要があります。 top_wrapperfloat: lefttop_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 に答える