Question

我对HTML非常糟糕，所以在重新创建以下内容时寻求一些帮助。我可以用一张桌子来做，但要明白现在这是不行的。所以需要建议。

alt text http://img130.imageshack.us/img130/8623/4panel.jpg

我想要实现的是四个固定大小的盒子，然后在一行中遍布页面。这些框中会包含一些信息，可能是文本，可能是图像，也可能是两者。

这些框将是静态大小，即我不希望它们调整大小以适应浏览器窗口的宽度。我猜它可能会用div标签完成，但我没有第一个线索从哪里开始。

Answer 1

你想要这样的东西（未经测试）

<div id="wrapper">

  <div id="box1" class="box">
    <!-- your content here -->
  </div>

  <div id="box2" class="box">
    <!-- your content here -->
  </div>

  <div id="box3" class="box">
    <!-- your content here -->
  </div>

  <div id="box4" class="box">
    <!-- your content here -->
  </div>

</div>

使用CSS

.box{
  width: 200px;
  margin-left: 20px;
  float: left;
}

#box1{
  margin-left: 0;
}

#wrapper{
  margin: 0 auto;  // Center on the page
  width: 860px;
}

Answer 2

您可以使用四个固定宽度/高度的div，这些div都在float:left;上设置。

<div class="box">Some content</div>
<div class="box">More content</div>
<div class="box">Maybe an image</div>
<div class="box">Some content and an image</div>

用这个css：

.box {
    width: 200px;
    float: left;
}

Answer 3

嗯，这不是那么棘手：

<div class="panelwrapper">
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
  <div>Content</div>
</div>

这就是你应该需要的所有HTML。

HTML如何连续标记4个面板以获取内容

3 个答案: