1

我正在尝试.column在我的 html 文档中创建 2 行元素。现在我有 1 行列，然后在页脚下方有另一行。

第一行列似乎符合我的要求，但是当我尝试创建具有相同规则的另一行列时，它垂直对齐而不是水平对齐。我将如何更改 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

4

1 回答 1

0

鉴于您的要求，我相信您想要创建以下内容：

----------------------------------------------------------------
|     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左，1px右） - 这使得 3 列比你想要的宽得多。通过应用box-sizing: border-box;它强制.column元素适应指定宽度内1%的填充和solid 1px #000边框。300px

换句话说 -300px实际上 =的 3 列900px。然后，当您在30px左右添加时，#container它仍然适合#container' 的960px宽度。

您可以在我对您的小提琴的更新中看到所有这些工作

于 2012-11-28T20:53:26.607 回答