如何安排div元素而不改变html代码中的顺序？

Question

我有以下HTML代码

<div class="holder">
    <div class="left"> DIV1 </div>

    <div class="right"> DIV2 </div>

    <div class="right"> DIV3 </div>

    <div class="right"> DIV4 </div>

    <div class="left"> DIV5 </div>

    <div class="right"> DIV6 </div>
</div>

如何在不改变html代码顺序的情况下如图所示排列div元素？

Answer 1

我同意danielnixon的说法，这不是最佳做法，如果其他人在任何时候编辑您的代码，可能会感到困惑。我建议您使用.left和.right类对HTML进行排序，以使其更直观：

<div class="holder">
<div class="left"> DIV1 </div>

<div class="left"> DIV5 </div>

<div class="right"> DIV2 </div>

<div class="right"> DIV3 </div>

<div class="right"> DIV4 </div>

<div class="right"> DIV6 </div>

我认为你想要实现的目标的最短途径是使用CSS浮动div，如下所示：

.left {
float: left;
clear: left;
}

.right {
float: right;
clear: right;
}

DEMO：http://jsfiddle.net/xzgs61uw/2/

此外，如果你想将div移动到一起，只需在CSS中创建.holder并限制其宽度，例如：

.holder {
width: 200px;
}

希望这有帮助！

Answer 2

您可以使用简单的CSS来操纵div的位置。以下是一个示例：http://jsfiddle.net/7uwzccs1/

HTML

<div class="holder">
<div class="left1"> DIV1 </div>

<div class="right"> DIV2 </div>

<div class="right"> DIV3 </div>

<div class="right"> DIV4 </div>

<div class="left2"> DIV5 </div>

<div class="right"> DIV6 </div>
</div>

CSS

.left1{
   position: absolute;
}

.left2{
   position: absolute;
   left: 8px;
   top:  25px;
}

.right{ 
  position: relative;
  left: 100px;
}

Answer 3

在CSS中为每个类使用clear和float属性。 JS Fiddle

.left{
    float: left;
    clear: left;
}
.right{
    float: right;
    clear: right;
}