Question

我试图在我的html文档中创建两行.column元素。现在我有一行列，后面是页脚下面的另一行。

第一行似乎按照我的意愿行事，但当我尝试使用相同的规则创建另一行列时，它会垂直对齐而不是水平对齐。我如何更改CSS以使第二行的列像第一行一样运行？

这是HTML：

<div id="columns">
  <div class="left column">
    <p>left column</p>
  </div>

  <div class="middle column">
    <p>middle column.</p>
  </div>    

  <div class="right column">
    <p>right column.</p>
  </div>
</div>

<div class="footer">
  <div class="left column">
    <p>left column</p>
  </div>

  <div class="middle column">
    <p>middle column.</p>
  </div>    

  <div class="right column">
    <p>right column.</p>
  </div>
</div>

这是CSS：

#columns {
width: 960px;
padding-top: 50px;
margin-bottom: 0px;
}

#columns .column {
    position: relative;
    width: 300px;
    padding: 1%;
    border: solid 1px #000;
}

#columns .left {
    float: left;
}

#columns .middle {
    float: left;
}
#columns .right {
    float: right;
}
#container #col1 {
    width: 320px;
    float: left;
}

这是我的jsFiddle

Answer 1

考虑到你的要求，我相信你想要创造以下内容：

----------------------------------------------------------------
|     left column    |   middle column    |    right column    |
----------------------------------------------------------------
|     left column    |   middle column    |    right column    |
----------------------------------------------------------------

为了做到这一点，你实际上并不需要像你创建的那样复杂的系统。您可以简单地执行以下操作：

<div id="container">

    <div class="column">left column</div>
    <div class="column">middle column</div>    
    <div class="column">right column</div>

    <div class="footer">
        <div class="column">left column</div>
        <div class="column">middle column</div>    
        <div class="column">right column</div>
    </div>

</div>

然后是CSS：

#container {
    width: 960px;  /* Provides a container with width = 3 columns + 2 paddings */
    padding: 30px; /* Provides left, right, top and bottom padding of 30px */
    margin: 0;     /* No margin around the bounding box */
}

#container .column {
    border: solid 1px #000; /* The border you were using */
    box-sizing: border-box; /* This forces width/height specs to set the size of 
                               the column's edge, INCLUDING border/padding */
    float: left;            /* Allows each column element to stack left */
    padding: 1%;            /* Provides the padding you wanted */
    width: 300px;           /* Sets a width */
}

我在CSS中注意到为什么每件作品都很重要。

但关键是属性box-sizing: border-box;。如果没有这个，添加到.column元素的边框和填充实际上会使300px + 1% + 2px（1px向左，{{1} }右） - 这使得3列比你想要的宽得多。通过应用1px，它会强制box-sizing: border-box;元素适合.column填充以及1%边框在指定的solid 1px #000宽度内。

换句话说 - 300px的3列实际上= 300px。当您在900px内左右添加30px时，它仍然符合#container的{{1}}宽度。

您可以在my update to your fiddle

中看到所有这些内容

我将为2行.col创建什么规则？

1 个答案: