最好自己查看代码。它托管的服务器是安全的，不幸的是我不允许自由发放密码。
发生的事情是我有三个大的div在理论上应该一个接一个地对齐，但是第三个div一直向右下降到右下角，尽管我的宽度值加起来达到100％。像往常一样，提前感谢大家。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>INT222</title>
<link rel="stylesheet" href="./css/mycss.css" type="text/css" media="screen" />
</head>
<body class = "body">
<div class="bdiv">
<nav class="nav">
<ul>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/">My Zenit Account</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/index.html">Home</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/gallery.html">Picture Gallery</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/video.html">Video</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/audio.html">Audio</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/tables.html">Tables</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/forms.html">Forms</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/css/mycss.css">CSS Used</a></li>
<li><a href="http://zenit.senecac.on.ca/~int222_122a07/assign2/other.html">Other</a></li>
</ul>
</nav>
</div>
<form method="post" action="https://zenit.senecac.on.ca/~int222_122a07/assign2/index.html" id="formex1">
<div class = "left1">
<h1 class = "mama">Mama's Pizza</h1> <br />
<hr />
<h1 class = "mama2">416 or 905 <br /> 222-6262</h1> <br />
<hr />
<table class="prices">
<tr>
<td>Small</td>
<td>$11.55</td>
</tr>
<tr>
<td>Medium</td>
<td>$15.25</td>
</tr>
<tr>
<td>Large</td>
<td>$22.00</td>
</tr>
<tr>
<td>X-Large</td>
<td>$25.00</td>
</tr>
<tr>
<td>Toppings</td>
</tr>
<tr>
<td>$1.79 Each</td>
</tr>
<tr>
<td>Plus 13% HST</td>
</tr>
<tr>
<td>Free Delivery</td>
</tr>
</table>
<p>
Your Price<br />
<input type="text" name="total" value="" readonly="readonly" />
</p>
</div>
<div class = "left2">
<div class = "pdiv">
<fieldset><legend>Personal Information</legend> <br />
Name <input type = "text" name = "Name" /> <br />
Account No. <input maxlength="10" size="10" name = "account#" /> <br />
Phone No. <input maxlength = "12" size = "12" name = "Phone#" /> <br />
Date of Birth <input maxlength = "7" size = "7" name = "DOB" />
</fieldset>
</div>
<div class = "pscdiv">
<fieldset><legend>Pizza Size & Crust</legend> <br />
<p>
<select name="pizza-size" size="5">
<option value="1"> Select Pizza Size </option>
<option value="2"> Small </option>
<option value="3"> Medium </option>
<option value="4"> Large </option>
<option value="5"> X-Large </option>
</select>
</p>
<p>
<select name="crust" size="3">
<option value="1"> Regular Crust </option>
<option value="2"> Thin Crust </option>
<option value="3"> Thick Crust </option>
<option value="4"> Whole Wheat Crust </option>
</select>
</p>
</fieldset>
</div>
<div class = "csdiv">
<fieldset><legend>Cheeses</legend> <br />
<p>
<input type = "radio" name = "Cheeses" value = "Mozzarella" />Mozzarella<br />
<input type = "radio" name = "Cheeses" value = "Reduced Fat" />Reduced Fat<br />
<input type = "radio" name = "Cheeses" value = "Feta" />Feta<br />
</p>
</fieldset>
</div>
<div class = "cdiv">
<fieldset><legend>Sauces</legend> <br />
<p>
<input type = "radio" name = "Sauces" value = "Pizza Sauce" />Pizza Sauce<br />
<input type = "radio" name = "Sauces" value = "BBQ Sauce" />BBQ Sauce<br />
<input type = "radio" name = "Sauces" value = "Garlic Sauce" />Garlic Sauce<br />
</p>
</fieldset>
</div>
<div class = "div6">
<fieldset><legend>Special Instructions</legend> <br />
<p>
<textarea name="Additional Comments" cols="32" rows="6"></textarea>
</p>
</fieldset>
</div>
<div class = "srdiv">
<input type="submit" value="Place Your Order" />
<input type="reset" value="Start Over" />
</div>
</div>
<div class = "right">
<fieldset><legend>Choose Toppings - $1.79 Each</legend> <br />
<div class = "tdiv1">
<p>
<input type="checkbox" name="Toppings" value="1" />Anchovies<br />
<input type="checkbox" name="Toppings" value="2" />Bacon<br />
<input type="checkbox" name="Toppings" value="3" />Ham<br />
<input type="checkbox" name="Toppings" value="4" />Pepperoni<br />
<input type="checkbox" name="Toppings" value="5" />Salami<br />
<input type="checkbox" name="Toppings" value="6" />Sausage<br />
</p>
</div>
<div class = "tdiv2">
<p>
<input type="checkbox" name="Toppings" value="7" />Broccoli<br />
<input type="checkbox" name="Toppings" value="8" />Green Olives<br />
<input type="checkbox" name="Toppings" value="9" />Green Peppers<br />
<input type="checkbox" name="Toppings" value="10" />Mushrooms<br />
<input type="checkbox" name="Toppings" value="11" />Red Onion<br />
<input type="checkbox" name="Toppings" value="12" />Roasted Garlic<br />
</p>
</div>
</fieldset>
</div>
<br />
</form>
</body>
</html>
.body {
width: 1024px;
margin: auto;
}
.bdiv{
position: relative;
border: solid 2px;
}
.nav ul{
list-style-type: none;
overflow: hidden;
}
.nav ul li {
display: block;
float: left;
padding: 0 25px;
}
.mdiv {
position: relative;
clear: both;
}
.h1 {
text-align: left;
color: #FFFFFF;
font-style: italic;
font-family: sans-serif;
border-style: groove;
padding: 4px;
}
.div1 {
background-color: #990000;
}
.subject {
font-size: 40px;
font-weight: bold;
}
.div2 {
width: 66%;
position: relative;
float: left;
}
.div3 {
width: 33%;
position: relative;
float: right;
}
.subject2 {
font-size: 24px;
font-family: monospace;
font-weight: bold;
text-align: center;
}
.list1 {
list-style-type: none;
}
footer {
vertical-align: middle;
text-align: center;
clear: both;
background-color:#990000;
color: #FFFFFF;
}
.fbody {
background-color:#0f0000;
width:1000px;
margin:auto;
color:#009900;
}
.left1{
display:table;
width: 20%;
float: left;
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
}
.left2 {
display:table;
width: 35%;
float: left;
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
}
.right {
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
width: 45%;
float: right;
clear: both;
}
.prices {
border: ridge 5px;
margin: auto;
text-align: center;
}
.pscdiv1 {
alignment-adjust: middle;
display: table-row;
}
.srdiv {
text-align: center;
}
.tdiv1 {
float: left;
border: none;
padding: 20 0px;
}
.tdiv2 {
margin-left: auto;
text-align: justify;
float: right;
padding: 0 35px;
}
答案 0 :(得分：1)
你的div正在包装，因为div的内部大小加起来是宽度的100％。但是，您已经列出了一个边框，它增加了div的宽度，并没有计入％宽度。如果你想保持div不被包装，你将需要考虑边界。
答案 1 :(得分：1)
这是因为您在最终容器上设置了clear:both。此外，最好在所有3个容器上使用标准class="left"，然后为每个容器设置不同的宽度。
在这种情况下，同时使用float:left和float:right会导致异常行为。
最后，边框包含在宽度百分比中，为了解决此问题，您可以使用CSS3和box-sizing: border-box;，但最好将宽度减少到99％。
以下是您的代码中的示例：click。
答案 2 :(得分：0)
如果将.right宽度更改为44％，它就可以正常工作。
答案 3 :(得分：0)
元素之间的空格/换行符增加了额外的宽度。删除它们（所以它看起来像</div><div class="div2">），它应该没问题。如果没有，请尝试添加box-sizing: border-box以使边框包含在宽度中。
答案 4 :(得分：0)
尝试将.right课程修改为：
.right {
border: solid 2px #000000;
background-color: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 10px #000000;
width: 44%;
float:left;
}