我正在尝试学习 div 的方法，并且正在尝试将我正在编写的网站与属性 float 对齐，尽管它似乎并没有像我想要的那样工作。你能看看我的代码吗？谢谢!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Walt Disney Concert Hall</title>
<meta http-equiv = "Content-type" content = "text/html; charset=UTF-8" />
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div id = "container">
<!-- HEADER -->
<div id = "header">Walt Disney concert hall</div>
<!-- MENU -->
<div id = "menu">
<a href = "home.html">Home</a>
<a href = "familyprograms.html">Family programs</a>
<a href = "visit.html">Visit</a>
<a href = "tickets.html">Concert tickets</a>
</div>
<!-- TEXT -->
<div id = "text">
<h3>Holiday sing-along</h3>
<p>End the year in song by bundling up and celebrating the sounds of the season
under the cool wintry skies. Sing-along with live musical accompaniment. Lyric
sheets are provided. No experience necessary.
<p>FREE admission. Tickets are distributed beginning at 6:00 p.m., while supplies
last. One ticket per person to those waiting in line. Seating capacity is limited.
First come, first served.</p>
</div>
<!-- IMAGES -->
<div id = "images">
<img src = "6_1.jpg" alt = "Classical" />
<img src = "6_2.jpg" alt = "Jazz" />
<img src = "6_3.jpg" alt = "World" />
<img src = "6_4.jpg" alt = "Pop" />
<img src = "6_5.jpg" alt = "Family and others" />
</div>
<!-- VOTE AND EVENTS -->
<div id = "voteandevents">
<form method = "get" name = "form_mostliked" action = "send.php">
<fieldset>
<legend>Vote</legend>
What do you like the most?
<br />
<input type = "radio" name = "radio_mostliked" value = "Ballet" checked = "checked" />
<br />
<input type = "radio" name = "radio_mostliked" value = "Operett" />
<br />
<input type = "radio" name = "radio_mostliked" value = "Opera" />
<br />
<input type = "radio" name = "radio_mostliked" value = "Other" />
<br />
<input type = "submit" name = "btn_submit" value = "send" />
<h3>Upcoming events:</h3>
<ol>
<li>Spotlight awards</li>
<li>Grupo Corpo</li>
<li>Deneve conducts Debussy</li>
<li>Natalie Cole - JAZZ</li>
</ol>
</fieldset>
</form>
</div>
</div>
</body>
</html>
CSS
body{
background: url("bg6.gif") repeat;
}
#container{
width: 795px;
margin: auto;
overflow: hidden;
border: 5px dashed #000;
}
#header{
background-image: url("header6.jpg");
width: 800px;
height: 150px;
text-align: right;
}
#menu{
float: left;
height: 35px;
width: 550px;
background: url("cell-bg6.gif") repeat-x;
}
#text{
width: 550px;
float: left;
text-align: justify;
}
#text p {
text-indent: 20px;
}
#images{
float: left;
height: 173px;
background-color: #000;
clear: left;
padding: 7px;
width: 550px;
}
#voteandevents{
float: right;
width: 200px;
}
最佳答案
可以将您的#voteandevents移到您的#menu之前 并且您的 CSS 没有任何变化。
关于css - 无法使 float 属性和 div 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20165064/