CSS格式列

Question

我正在尝试将我的页面组织成3列。到目前为止，我已经存在了列，但是其中一列被包裹在其他两列之下。

我使用宽度= 300且高度= 300的图片，每列都有一个简单的标题。

这是我的CSS：

<style type="text/css">
        /*4 + 335*3 = 1009px*/
        #wrapper {
                border: 2px solid black;
                width: 1009px;
                margin-left: auto;
                margin-right: auto;
        }
        #header {
                text-align: center;
        }
        /* 325px content + 10px = 335px physical width per column */
        .column {
                float: left;
                width: 325px;
                margin: 5px;
                text-align: center;
                min-height: 250px;
        }

        #middle {
                border-left: 2px solid black;
                border-right: 2px solid black;
                margin-left: 0;
                margin-right: 0;
                padding-left: 10px;
                padding-right: 10px;
        }

我猜测的包装宽度中的数学肯定是错误的，但是我无法发现错误。让我知道你的想法。

HTML：

<div id="wrapper">
  <div id="left" class="column">
    <h2>Tic Tac Toe</h2>
    <a href="tictactoe.php">
      <img src="images/tictactoe.png" alt="Tic-Tac-Toe"
        width="300" height="300"/>
    </a>
  </div>
  <div id="middle" class="column">
    <h2>Puzzle</h2>
    <a href="puzzle.php">
      <img src="images/puzzle.png" alt="Puzzle" 
        width="300" height="300"/>
    </a>
  </div>
  <div id="right" class="column">
    <h2>Rock Paper Scissors</h2>
    <a href="rockpaperscissors.php">
      <img src="images/rock_paper_scissors" alt="Rock Paper Scissors" 
        width="300" height="300"/>
    </a>
  </div>
</div>

Answer 1

你的包装纸不够宽，不适合三个方格。根据{{​​3}}

将width课程中的#wrapper更改为1019px

Answer 2

改变这个：

#wrapper {
  border: 2px solid black;
  width: 1019px;
  margin-left: auto;
  margin-right: auto;
}

我个人不喜欢手动进行布局。请考虑使用960.gs，或者更好的是Twitter Bootstrap。