0

先週、問題が発生したときに同様の質問を投稿しましたが、同じ質問で再質問できるかどうかわからなかったので、念のため新しい質問を作成しました。

1 つは左に、もう 1 つは右に浮かせた 2 つの列があり、clear:both を使用してフロートをクリアしていますが、機能していません。すべての DIV タグが閉じられていることを確認し (これは前回の問題でした)、clear:both を別の部分に移動しましたが、それでも機能しないと判断しました。コードは以下にありますが、それがどのように見えるかを見たい場合は、ここで見ることができますhttp://www.richardawarner.co.uk/portfoliov2

どんな助けでも大歓迎です。

HTML

<div id="sectiontwowrapper">
        <div id="header">
            <h1>About Me</h1>
        </div><!--Header-->

        <div id="contentwrapper">
            <div id="aboutmeleft">
                <h3>About Me</h3>
                <br>
                <a>My name is <strong>Richard Warner</strong> and I am a young web designer from Birmingham, United Kingdom. I have recently graduated from Manchester Metropolitan University having studied BSc(Hons) Multimedia Computing. Whilst having an interest in studying different aspects to computers, it was here where I developed a passion for web design. I have learnt various languages such as HTML, CSS and PHP aswell as experienced using Adobe Photoshop, Adobe Dreamweaver and other Adobe products.</a>

                <p>
                    <h3>Skills and Expertise</h3>
                    <br>
                        <ul>
                            <li><a>HTML and CSS</a></li>
                            <li><a>PHP</a></li>
                            <li><a>MySQL</a></li>
                            <li><a>Wordpress</a></li>
                            <li><a>Adobe Photoshop</a></li>
                            <li><a>Adobe Dreamweaver</a></li>
                        </ul>

            </div><!-- About me left -->

            <div id="aboutmeright">
                <h3>Hobbies</h3>
                <br>
                <a>Hobbies will appear here</a>

                <p>
                    <h3>My CV</h3>
                    <br>
                        <a>You can download my CV by clicking here.</a>
            </div><!-- About Me right -->


        </div><!--Content Wrapper -->


    </div><!--Section Two Wrapper -->
    <div class="clear"></div>


    <div id="sectionthreewrapper">
        this line should be underneath this sections border line below
    </div> <!--Section three wrapper -->

CSS

#sectiontwowrapper {

position: relative;
top: 100px;
min-height: 550px;
min-width: 960px;
text-align: left;
border: solid 1px #000;

#contentwrapper {

width: 960px;
margin: 0 auto;
text-align: left;
}

#aboutmeleft {

width: 450px;
height: 400px;
/*border: 1px solid #000;*/
position: relative;
top: 40px;
float: left;


}

#aboutmeright {

width: 450px;
height: 220px;
/*border: 1px solid #000;*/
position: relative;
top: 40px;
float: right;
}

.clear {

display: block;
clear: both;

}

4

1 に答える 1

5

sectiontwowrapperdiv を with に設定しましposition: relativeたtop: 100px。これにより、セクション全体が 100 ピクセル下に移動します。クリアは機能しますが、sectiontwowrapper は次のセクションに 100 ピクセル下になります。

于 2013-06-01T18:20:05.860 に答える