1

.columnHTML ドキュメントに2 行の要素を作成しようとしています。現在、1行の列に続いて、フッターの下に別の行があります。

列の最初の行は私が望んでいるように見えますが、同じルールで列の別の行を作成しようとすると、水平ではなく垂直に整列します。CSS を変更して、列の 2 行目を最初の行のように機能させるにはどうすればよいですか?

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;に強制されます。.column1%solid 1px #000300px

言い換えれば -300px実際には =の 3 列900px。30px次に、内で左右に追加すると、の幅#container内に収まります。#container960px

あなたのフィドルへの私のアップデートで、これらすべてが機能しているのを見ることができます

于 2012-11-28T20:53:26.607 に答える