为什么我的最后一个专栏不显示？答案

【问题标题】：Why won't my last column show?为什么我的最后一个专栏不显示？
【发布时间】：2016-03-13 18:47:46
【问题描述】：

我正在尝试复制一个网络论坛，但遇到了列问题。出于某种原因，我无法显示最后一列，也不知道为什么会这样。我要复制的是：

到目前为止我的代码：

<div id="wrapper">
  <div id="col1">
    <h2><u> Lab 04 </u></h2>
    <p class= "fontClass">
      Papa's 
      <br />
      Pizza
    </p>
    <hr>
    <p class= "fontClass">
      416 or 905
      <br />
      222-2626
    </p>
    <hr />
    <table class='price'>
      <tr>
        <td class='pricetd'>Small</td>
        <td class='pricetd'>$11.55</td>
      </tr>
      <tr>
        <td class='pricetd'>Medium</td>
        <td class='pricetd'>$15.25</td>
      </tr>
      <tr>
        <td class='pricetd'>Large</td>
        <td class='pricetd'>$22.00</td>
      </tr>
      <tr>
        <td class='pricetd'>X-Large</td>
        <td class='pricetd'>$25.00</td>
      </tr>
      <tr>
        <td class='pricetd'>Toppings</td>
        <td class='pricetd'>$1.79 Each</td>
      </tr>
      <tr>
        <td class='pricetd'>Plus 13% HST</td>
        <td class='pricetd'>Free Delivery</td>
      </tr>
    </table>
    <br />
    <p>your price</p>
    <input class='total' type='text' name='price' id='price' readonly='readonly' maxlength='8' />
    <p>
      <input type="submit"  class="button" value="PLACE YOUR ORDER" />
      <input type="reset"  value="    Clear   " />  
    </p>
  </div>
  <div id="col2">
    <fieldset>
      <legend>Personal Information</legend>
      <p>
        Name       
        <input type="text" name="surname" id="surname" maxlength="15">
        <br>
        Account No.
        <input type="text" name="client" id="client" maxlength="12">
        <br>
        Phone No.  
        <input type="text" name="phone" id="phone" maxlength="12">
        <br>
        Date of Birth
        <input type="text" name="dob" id="dob" maxlength="7">
      </p>
    </fieldset>
    <fieldset>
      <legend>Pizza size and Crust</legend>
      <select id="pizzaSize" name="pizzaSize" size="2">
        <option value="Select Pizza Size">Select Pizza Size</option>
        <option value="S">Small</option>
        <option value="M">Medium</option>
        <option value="L">Large</option>
        <option value="X">X-Large</option>
      </select>
      <select id="pizzaCrust" name="pizzaCrust" size="2">
        <option value="regular">Regular Crust</option>
        <option value="thin">Thin Crust</option>
        <option value="thick">Thick Crust</option>
        <option value="wheat">Whole Wheat Crust</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>Cheeses</legend>
      <p>
        <input type="radio" name="cheese" id="c01" value="Mozzarella" />Mozzarella
        <input type="radio" name="cheese" id="c02" value="Reduced Fat" />Reduced Fat
        <input type="radio" name="cheese" id="c03" value="Feta" />Feta
      </p>
    </fieldset>
    <fieldset>
      <legend>Sauces</legend>
      <p>
        <input type="radio" name="sauce" id="s01" value="Pizza  Sauce" />Pizza Sauce
        <input type="radio" name="sauce" id="s02" value="BBQ Sauce" />BBQ Sauce
        <input type="radio" name="sauce" id="s03" value="Garlic Sauce" />Garlic Sauce
      </p>
    </fieldset>
    <fieldset>
      <legend>Special instructions</legend>
      <textarea name="note" id="note" maxlength="150"></textarea>
    </fieldset>
  </div>
  <div id="col3">
    <fieldset>
      <legend>Choose toppings - $1.79 each</legend>
      <div id="col3A">
        <label for="t01"><input type="checkbox" name="toppings" id="t01" value="Anchovies">Anchovies</label>
        <label for="t02"><input type="checkbox" name="toppings" id="t02" value="Bacon">Bacon</label>
        <label for="t03"><input type="checkbox" name="toppings" id="t03" value="Ham">Ham</label>
        <label for="t04"><input type="checkbox" name="toppings" id="t04" value="Pepperoni">Pepperoni</label>
        <label for="t05"><input type="checkbox" name="toppings" id="t05" value="Salami">Salami</label>
        <label for="t06"><input type="checkbox" name="toppings" id="t06" value="Sausage">Sausage</label>
      </div>
      <div id="col3B">
        <label for="t07"><input type="checkbox" name="toppings" id="t07" value="Broccoli">Broccoli</label>
        <label for="t08"><input type="checkbox" name="toppings" id="t08" value="Green Olives">Green Olives</label>
        <label for="t09"><input type="checkbox" name="toppings" id="t09" value="Green Peppers">Green Peppers</label>
        <label for="t010"><input type="checkbox" name="toppings" id="t10" value="Mushrooms">Mushrooms</label>
        <label for="t011"><input type="checkbox" name="toppings" id="t11" value="Red Onions">Red Onions</label>
        <label for="t012"><input type="checkbox" name="toppings" id="t12" value="Roasted Garlic">Roasted Garlic</label>
      </div>
    </fieldset>
    <fieldset>
      <div id="special">
        <img src="papas.jpg" alt="" />
      </div>
    </fieldset>
  </div>
</div>

【问题讨论】：

这是您就这个问题/问题发表的第三篇文章。我们已经告诉过您，您使用的表格不正确——它们不应该用于布局。而且，我什至为您提供了创建屏幕截图所需的列/页脚的解决方案。
我使用了你的建议，它似乎工作正常......我只是不明白为什么最后一列没有显示。我认为新代码的更新问题是有序的。我很抱歉。
一切似乎都很好，除了最后（第三）列没有显示
但是，您没有使用我的建议，因为您仍在使用这些表格。您必须了解，在页面“看起来不错”之前，设计网页并不是关于编码。各种 HTML 元素的使用取决于这些元素提供的语义含义。正如您所发现的，表格只是让您的事情变得更加困难。只需将您的字段集放在我上次回答的 div 元素中即可。
对不起，我大约一个月前才开始学习 HTML。您能否提供一个示例来说明您的建议只是为了让我更清楚一点？将不胜感激。我感谢您迄今为止的帮助

标签： html css html-table

【解决方案1】：

此解决方案只是将您的字段集内容放入我在之前的答案中显示的 div 结构中。当然，您需要添加其余内容，但它显示了如何在不使用表格的情况下获取列布局。还需要 CSS 来完成这项工作，但这就是这种事情的完成方式。

#col1, #col2, #col3 {
      float: left;
      box-sizing: border-box;
    }

    #col1 {
      width: 20%;
    }

    #col2, #col3 {
      width: 40%;
    }

    #col3A, #col3B {display:table-cell; width:50%;}

    #footer {
      clear: both;
      background: #000;
      color: #fff;
    }

#col3A > label, #col3B > label {display:block;}

 fieldset {border: 3px dashed red; }

<div id="wrapper">

    <div id="col1">
      Column One Data Here
    </div>

    <div id="col2">

      <fieldset>
        <legend>Personal Information</legend>
        <p>
          Name       
            <input type="text" name="surname" id="surname" maxlength="15">
          <br>
          Account No.
            <input type="text" name="client" id="client" maxlength="12">
          <br>
          Phone No.  
            <input type="text" name="phone" id="phone" maxlength="12">
          <br>
          Date of Birth
            <input type="text" name="dob" id="dob" maxlength="7">
        </p>
      </fieldset>

      <fieldset>
        <legend>Pizza size and Crust</legend>
        <select id="pizzaSize" name="pizzaSize" size="2">
          <option value="Select Pizza Size">Select Pizza Size</option>
          <option value="S">Small</option>
          <option value="M">Medium</option>
          <option value="L">Large</option>
          <option value="X">X-Large</option>
        </select>
        <select id="pizzaCrust" name="pizzaCrust" size="2">
          <option value="regular">Regular Crust</option>
          <option value="thin">Thin Crust</option>
          <option value="thick">Thick Crust</option>
          <option value="wheat">Whole Wheat Crust</option>
        </select>
      </fieldset>
      
            <fieldset>
        <legend>Cheeses</legend>
        <p>
          <input type="radio" name="cheese" id="c01" value="Mozzarella" />Mozzarella
          <input type="radio" name="cheese" id="c02" value="Reduced Fat" />Reduced Fat
          <input type="radio" name="cheese" id="c03" value="Feta" />Feta
        </p>
      </fieldset>

      <fieldset>
        <legend>Sauces</legend>
        <p>
          <input type="radio" name="sauce" id="s01" value="Pizza  Sauce" />Pizza Sauce
          <input type="radio" name="sauce" id="s02" value="BBQ Sauce" />BBQ Sauce
          <input type="radio" name="sauce" id="s03" value="Garlic Sauce" />Garlic Sauce
        </p>
      </fieldset>

      <fieldset>
        <legend>Special instructions</legend>
        <textarea name="note" id="note" maxlength="150"></textarea>
      </fieldset>

    </div>
  
    <div id="col3">

     <fieldset>
     <legend>Choose toppings - $1.79 each</legend>
      <div id="col3A">
          <label for="t01"><input type="checkbox" name="toppings" id="t01" value="Anchovies">Anchovies</label>
          <label for="t02"><input type="checkbox" name="toppings" id="t02" value="Bacon">Bacon</label>
          <label for="t03"><input type="checkbox" name="toppings" id="t03" value="Ham">Ham</label>
          <label for="t04"><input type="checkbox" name="toppings" id="t04" value="Pepperoni">Pepperoni</label>
          <label for="t05"><input type="checkbox" name="toppings" id="t05" value="Salami">Salami</label>
          <label for="t06"><input type="checkbox" name="toppings" id="t06" value="Sausage">Sausage</label>
      </div>
      <div id="col3B">
          <label for="t07"><input type="checkbox" name="toppings" id="t07" value="Broccoli">Broccoli</label>
          <label for="t08"><input type="checkbox" name="toppings" id="t08" value="Green Olives">Green Olives</label>
          <label for="t09"><input type="checkbox" name="toppings" id="t09" value="Green Peppers">Green Peppers</label>
          <label for="t010"><input type="checkbox" name="toppings" id="t10" value="Mushrooms">Mushrooms</label>
          <label for="t011"><input type="checkbox" name="toppings" id="t11" value="Red Onions">Red Onions</label>
          <label for="t012"><input type="checkbox" name="toppings" id="t12" value="Roasted Garlic">Roasted Garlic</label>
      </div>

      </fieldset>
    </div>
    <div id="footer">footer</div>

  </div>

【讨论】：

啊，好的，谢谢。如果我想应用 CSS 来表示单元格周围的各个边框（即披萨大小和外壳单元格），我会指什么来实现这一点？使用表格，我知道它会如何完成，但如果没有它们，我不确定如何将 CSS 应用到图像上（不仅仅是黑色/白色）。再次感谢！
我的答案中根本没有单元格，这就是重点。但是，如果您询问字段集周围的边界，您将编写一条关于所有字段集或您要设置样式的字段集的规则。例如，这将更改所有字段集边框： fieldset {border: 3px dashed red; }。我已经更新了我的答案以显示这一点。
为了能够设置特定元素（而不是所有类型）的样式，最简单的方法是为该元素添加id 属性，然后样式规则将是#theIdYouAddedToTheElement { ... }
啊，好的，谢谢。这可能是另一个愚蠢的问题，但是当我输入中间列的其余数据（奶酪、酱汁和特殊说明）时，它会将它们移到第三列并将浇头从页面上推开？您能否提供最后一个解决方案作为如何用数据完成中间列？我不知道为什么我在这看起来很简单的时候遇到了这么大的困难。非常感谢您的帮助。
您的问题出在最后一个<textarea> 元素上，当它需要一个结束标记并且应该是<textarea></textarea> 时，您将其写为：<textarea />。这很可能是您的表格一开始没有显示第三列的原因。我不知道您从哪里学习 HTML，但它看起来像一个仍然使用 1998 年过时语法的来源。