0

自分でコードを確認するのが最善です。それがホストされているサーバーは安全であり、残念ながら私はパスワードを自由に与えることを許可されていません。

何が起こっているのかというと、理論的には隣り合って配置されているはずの3つの大きなdivがありますが、すべての幅の値が100％に加算されているにもかかわらず、3番目のdivは右下まで下がります。いつものように、よろしくお願いします。

<!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は、最終的なコンテナを設定したためです。また、3つのコンテナすべてに標準を使用してから、class="left"個々のコンテナごとに異なる幅を設定することをお勧めします。

float:leftこのような場合、一緒に使用するとfloat:right異常な動作が発生する可能性があります。

最後に、境界線が幅のパーセンテージに含まれています。これを回避するには、CSS3を使用できますがbox-sizing: border-box;、幅を99％に減らすことをお勧めします。

コードのフィドルの例を次に示します。をクリックします。

于 2012-07-14T20:24:13.843 に答える
0

.right幅を44％に変更すると、問題なく機能します。

于 2012-07-14T20:22:20.840 に答える
0

要素間のスペース/改行により、幅が広がります。それらを削除して（のように見えるように</div><div class="div2">）、問題ないはずです。box-sizing: border-boxそうでない場合は、境界線が幅に含まれるように追加してみてください。

于 2012-07-14T20:24:34.893 に答える
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 に答える