html - 没有容器div将div分成左右

Question

在我的代码 div 中添加动态，我不想使用像 <div class"left/right"> 这样的额外 div用于包含左或右 div。

<div class="container">
  <div class="row">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo3</div>
  </div>
</div>

使用这段代码我的 div 看起来像

------------------
| demo1 |
------------------
| demo2 | demo3 |
------------------

但是我想要，例如。

------------------
| demo1 | demo3 |
------------------
| demo2 | demo4 |
------------------
| demo5 | 

意味着右侧 div 总是在左侧设置为右侧或左侧。如果 Bootstrap 中有任何解决方案，那么它对我有好处。

Answer 1

您应该删除 .row 容器，因为它限制元素属于该容器本身。我尝试使用 float: left 和 float: right。

HTML

<div class="container">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo3</div>
    <div class="col-md-4 right">demo4</div>
    <div class="col-md-8 right">demo5</div>
    <div class="col-md-8 left">demo6</div>
    <div class="col-md-4 right">demo7</div>
    <div class="col-md-4 right">demo8</div>
</div>

CSS

* {
    box-sizing: border-box;
}
.left {
    float: left;
    background-color: green;
}
.right {
    float: right;
    background-color: red;
}
.container > div {
    width: 50%;
    height: 100px;
    margin: 5px 0px;
}
.left + .left {
    clear: left;
}
.right + .right {
    clear: right;
}
.right + .right ~ .left, .left + .left ~ .right {
    position: relative;  /* or use just margin-top */
    top: -110px;      /* height + margin-top + margin-bottom */
}

Working Fiddle

[注意]:如果你有更多的左/右元素，那么你应该这样使用:

.right + .right + .right ~ .left, .left + .left + .left ~ .right{
    position: relative;
    top: -220px;
}