HTML如何在一行中为内容标记4个面板

我对HTML的理解非常糟糕，因此希望在重新创建以下内容时得到一些帮助。我可以用一张桌子来做，但我知道现在这是一个禁忌。因此需要建议

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

---

这些框的大小将是静态的（我不想让它们调整大小以适应浏览器窗口的宽度）。我猜可能会用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>

您可以使用四个固定宽度/高度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>

嗯，这没那么棘手：

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


内容
内容
内容
内容

这就是您所需要的全部HTML。
好吧，这并没有那么棘手：

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


内容
内容
内容
内容

这就是您需要的所有HTML。
您想要这样的东西（未经测试）

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

额外的div用于执行诸如保持面板框居中以及逻辑分组面板之类的操作。但是，您可以不使用它（尽管您必须将类添加到div中）。我很难计算出panelwrapper所需的CSS。额外的div用于做一些事情，例如保持面板框居中，以及按逻辑对面板进行分组。但是，您可以不使用它（尽管您必须将类添加到div中）。我很难计算出panelwrapper所需的CSS。这有很多
id
和
class
属性；特别是考虑到（在你的例子中）
#wrapper
是你唯一真正需要的。我选择了皮带和支架的可扩展性，而不是极简主义。您可以删除不必要的标记，但正如Martin所说，他的HTML不好，我想我应该说清楚。额外的box1，bax2 Id可以让你为每个框设定更多的样式，例如，给每个框赋予不同的背景色；特别是考虑到（在你的例子中）
#wrapper
是你唯一真正需要的。我选择了皮带和支架的可扩展性，而不是极简主义。您可以删除不必要的标记，但正如Martin所说，他的HTML不好，我想我应该说清楚。额外的box1，bax2 Id可以让你为每个框设定更多的样式，例如，给每个框一个不同的背景色。说表是一个“不”有点过于简单化了。除非你想激怒一群人这不是我的本意——我刚读到表格应该只用于表格数据。说表格是“不”有点过于简单了。除非你想激怒一群人这不是我的本意——我刚刚读到表格应该只用于表格数据。
.box{
  width: 200px;
  margin-left: 20px;
  float: left;
}

#box1{
  margin-left: 0;
}

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