0

最好自己看代码。托管它的服务器是安全的，不幸的是我不允许随意提供密码。

发生的事情是我有三个大 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;
}
4

5 回答 5

1

由于 div 的内部大小加起来是宽度的 100%，因此您的 div 正在换行。但是，您列出了一个边框，它增加了 div 的宽度，并且没有计入 % 宽度。如果要防止 div 换行，则需要考虑边框。

于 2012-07-14T20:23:03.420 回答
1

这是因为您已经clear:both设置了最终容器。此外，最好class="left"在所有 3 个容器上使用一个标准，然后为每个单独的容器设置不同的宽度。

在这种情况下，一起使用float:left和可能会导致异常行为。float:right

最后，边框包含在宽度百分比中，要解决此问题，您可以使用 CSS3，box-sizing: border-box;但是最好将宽度减小到 99%。

这是您的代码中的一个示例小提琴：单击。

于 2012-07-14T20:24:13.843 回答
0

尝试将您的.right课程修改为：

.right {
    border: solid 2px #000000;
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #000000;
    width: 44%;
    float:left;
}
于 2012-07-14T20:25:50.317 回答
0

如果您将 .right 宽度更改为 44%，它就可以正常工作。

于 2012-07-14T20:22:20.840 回答
0

元素之间的空格/换行符增加了额外的宽度。删除它们（看起来像</div><div class="div2">），它应该没问题。如果没有，请尝试添加box-sizing: border-box以使边框包含在宽度中。

于 2012-07-14T20:24:34.893 回答