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

你想要这样的东西(没有测试)

<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;
}

您可以使用四个固定宽度/高度的分隔符,这些分隔符都设置在 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;
}

好吧,这并不难:

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

这正是您所需要的所有HTML。