在我的代码 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 中有任何解决方案,那么它对我有好处。
最佳答案
您应该删除 .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 */
}
[注意]:如果你有更多的左/右元素,那么你应该这样使用:
.right + .right + .right ~ .left, .left + .left + .left ~ .right{
position: relative;
top: -220px;
}
关于html - 没有容器div将div分成左右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26211643/