Question

是否可以制作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>

Answer 1

我猜你不能用CSS做到这一点。它是用于定义元素样式的语言，而不是用于修改其结构的语言。您可以考虑使用jQuery或XSLT。

Answer 2

你可以使用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?

Answer 3

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

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

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

没有任何形式的样式，输出将是：

Content1
Content2
Content3

您要求的是

Answer 4

我想我想通过一些额外的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;
}

Answer 5

让我变色，但你不能用无序列表来实现类似的东西，因为你正在寻找嵌套元素？（http://jsfiddle.net/xDJAY/）不确定这是否是您正在寻找的结构。

如何使嵌套的div显示为CSS的兄弟姐妹？

5 个答案: