如何使用CSS使嵌套的div显示为同级？

是否可以创建div的嵌套结构

<div>Content1
  <div>Content2
    <div>Content3</div>
  </div>
</div>

看起来像左浮动的固定宽度的div

<style>
  div {
    float: left;
    width: 200px;
  }
</style>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>

---

我想你不能用CSS。它是一种用于定义元素样式的语言，而不是用于修改其结构。您可以考虑在您的案例中使用jQuery或XSLT。

您可以使用margin top属性来获得这种效果

<div style="width:100px;height:100px;border:1px solid black">

<div style="width:100px;height:100px;border:1px solid green;margin-top:100px">
</div?

</div?

---

实际上你不需要做任何事情，这是块级元素的默认行为

尝试创建一个空白html页面并插入行

<div>Content1
  <div>Content2
    <div>Content3</div>
  </div>
</div>

---

这正是您所要求的

我想我已经想好了如何通过一些额外的html和绝对定位来做到这一点：

<div id="parent">
  <div class="nest">
    <div class="content">One</div>
    <div class="nest">
      <div class="content">Two</div>
      <div class="nest">
        <div class="content">Three</div>
      </div>
    </div>
  </div>  
</div>
//css:
#parent {
  position: relative;
}
div.nest {
  position:absolute;
  width: 200px;  
  top: 0;
  left: 200px; /*should be same as width */
  /* the next is the tricky part */ 
  margin: 0px;
  padding: 0px;
  border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 4px;
}

---

给我涂上noobish的颜色，但是你不能用一个无序的列表实现类似的东西吗，因为你正在寻找嵌套元素？但不确定这是否是您要查找的结构。

前一个块缺少一个。你想做什么？如果你需要它看起来像那样，为什么不把它标记成那样呢？也许吧。这取决于第一个示例的实际外观。此刻。您需要提供一个更好的示例。@Kyle，@Pekka:这背后的想法是以Mac OS呈现文件和文件夹树的方式呈现嵌套的集合结构。选择文件夹时，每个嵌套级别都会显示在右侧。我真的需要保持结构嵌套。你的代码片段已经完成了你所需要的-并排显示div，对吗？那么问题是什么呢？查看@thirtydot的JSFIDLE并告诉我们您想要什么。CSS可以很容易地使元素看起来在结构上与HTML不同，这是CSS存在的主要原因之一。您确定您的标记是正确的吗？我认为ul不能像孩子一样拥有ul，只有li。我很确定你可以在列表中嵌套列表，正如更多示例所示。我认为新的嵌套列表仍然保留了原始列表的格式，因此一个留有空白的ul:20px；将原来的20px+新的20px缩进2级ul。你们都对了一半。UL/OL只能将LI作为孩子，但LI可以将UL/OL作为孩子。这是Nathan代码的一个稍加修改的版本注：嵌套的ULs是LIs的子级：

<div id="parent">
  <div class="nest">
    <div class="content">One</div>
    <div class="nest">
      <div class="content">Two</div>
      <div class="nest">
        <div class="content">Three</div>
      </div>
    </div>
  </div>  
</div>
//css:
#parent {
  position: relative;
}
div.nest {
  position:absolute;
  width: 200px;  
  top: 0;
  left: 200px; /*should be same as width */
  /* the next is the tricky part */ 
  margin: 0px;
  padding: 0px;
  border: 0px;
}
/* apply custom border, padding and margin here */
div.content {
  border: 1px solid #ccc;
  padding: 8px;
  margin: 4px;
}