Question

我上周在遇到问题时发布了一个类似的问题，并且不确定我是否可以在同一个问题中重新提问，所以我刚刚创建了一个新问题。

我有两个列，一个向左浮动，一个向右浮动，我使用清除：两个都清除浮动但是它不起作用。我已经检查过以确保我的所有DIV标签都已关闭它们（这是上次的问题）并移动清除：两者都分别到不同的部分，但它仍决定不起作用。代码如下，但如果你想看看它的样子，可以在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;

}

Answer 1

您的sectiontwowrapper div设置为position: relative top: 100px。这会使整个部分向下移动100个像素 - 即使清晰的工作，然后将截面填充到下一部分100px。

漂浮物未被清除

1 个答案: