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

您的包装器不够宽，无法容纳三个方块。按照这个小提琴将#wrapper类中的width更改为 1019px。

Answer 2

更改以下内容：

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

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