0

使用したフロートのクリアに問題があり、それが機能しない理由がわかりません。

3 列のレイアウトでいくつかの情報を取得しました。フロートをクリアして、下に情報を追加し続けられるようにしましたが、下に移動しません。

HTML

<div class="aboutme">
<h1>About Me</h1>
<p>
<br>
<br>
<a>My name is <strong>Richard Warner</strong> and I am a young web designer from          Birmingham, UK. I have recently graduated from Manchester Metropolitan University having studied BSc(Hons) Multimedia Computing</a>. 
</p>
</div>

<div class="skills">
<h1>Skills & Expertise</h1>
<p>
<br>
<br>
<ul id="skilllist">
<li><a>HTML & 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>
</p>
</div>

<div class="cv">
<h1>My CV</h1>
<p>
<br>
<br>
<a>You can download my CV by clicking here</a>
</p>
</div>

</div>
<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
</div>

CSS

.aboutme {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
}

.skills {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 210px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {

clear:both;
}

DIV タグが閉じていることを確認しましたが、それらはすべて閉じています。どんな助けでも感謝します、ありがとう。

4

2 に答える 2

1

</div>終わり近くにエキストラがあります。予想される動作は何ですか？jsFiddleのコードは、本来どおりにレンダリングされているようです。クリア div の後のすべては、その上にある浮動要素の下にあります。

<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
    This is below the floats above<br>
    Not a word of a lie
</div>
于 2013-05-27T20:02:18.223 に答える
0

役立つ場合はこれを確認してください：

http://jsbin.com/ofunas/4/

CSS:

.aboutme {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;

}

.skills {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 310px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {
display:block;
clear:both;
}
.div4 {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-top:20px;
}
于 2013-05-27T20:07:52.310 に答える