0

我正在尝试将我的页面组织成 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>
4

2 回答 2

2

您的包装纸不够宽，无法容纳三个正方形。根据this fiddlewidth将类中的更改#wrapper为1019px

于 2012-12-04T02:22:44.913 回答
2

改变这个：

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

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

于 2012-12-04T02:26:10.283 回答