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

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 float div:

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

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

演示:http://jsfiddle.net/xzgs61uw/2/

此外，如果您想将 div 靠得更近，只需在 CSS 中创建 .holder 并限制其宽度，例如:

.holder {
width: 200px;
}

希望这对您有所帮助!