0

ページを 3 つの列に整理しようとしています。これまでのところ、列は存在していますが、列の 1 つが他の 2 つの下にラップされています。

幅 = 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

ラッパーの幅が 3 つの正方形に収まるほど十分ではありません。このフィドルwidthに従って、#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 に答える