Как сделать так, чтобы вложенные элементы div отображались в CSS как братья и сестры?

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

Раскрась меня, нубиш, но разве ты не мог добиться чего-то похожего с неупорядоченным списком, так как ты ищешь вложения элементов? (http://jsfiddle.net/xDJAY/) Не уверен, что именно эту структуру вы ищете.

Answer 2

Полагаю, я понял, как это сделать, добавив немного 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 3

вы можете использовать свойство 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 4

На самом деле вам не нужно ничего делать на самом деле, это поведение по умолчанию для элементов уровня блока.

Попробуйте создать пустую HTML-страницу и вставить строки

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

Без какой-либо стилизации результат будет:

Content1
Content2
Content3

Что вы и просите

Answer 5

Я думаю, вы не можете сделать это с помощью CSS.Это язык для определения стиля элементов, а не для изменения их структуры.Вы можете подумать о jQuery или XSLT для вашего случая.