划分成左右无div div

在我的代码div添加动态，我不想使用额外的div如<div class"left/right">包含左或右div。使用划分成左右无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中有任何解决方案，那么它对我有好处。

来源

2014-10-06 i' m PosSible

您可以使用下面的同位素jQuery插件： http://isotope.metafizzy.co/ – 2014-10-06 07:45:03

没有感谢，我想这个使用HTML和CSS。 – 2014-10-06 08:40:23

（）'1，3，2，4，5'这是什么逻辑？ – 2014-10-07 05:20:33

您应该删除.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; 
}

来源

2014-10-06 07:39:49

感谢您的回答，但在我的实时代码中需要'.row'容器，并且没有修复多少个左侧或右侧DIV。 – 2014-10-06 10:02:10

方法1 使用Twitter的引导结构

<div class="container"> 

    <div class="row"> 
    <div class="col-md-6">demo1</div> 
    <div class="col-md-6">demo2</div> 
    </div> 

    <div class="row"> 
    <div class="col-md-6">demo3</div> 
    <div class="col-md-6">demo4</div> 
    </div> 

    <div class="row"> 
    <div class="col-md-6">demo5</div> 
    <div class="col-md-6">demo6</div> 
    </div> 

</div>

方法2

或者你可以简单的尝试

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12" id="equaldivs"> 

      <div>demo1</div> 
      <div>demo2</div> 
      <div>demo3</div> 
      <div>demo4</div> 
      <div>demo5</div> 
      <div>demo6</div> 

     </div> 
    </div> 
</div>

，并为你的S tyle.css

#equaldivs div:nth-child(odd) { 
    width:50%; 
    float:left 
} 
#equaldivs div:nth-child(even) { 
    width:50%; 
    float:right 
}

来源

2014-10-06 09:28:05

谢谢，但我不想要这种类型的方法，因为左div总是想要在左边和右边。 – 2014-10-06 10:30:13

试试这个

HTML

<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 class="col-md-8 left">demo4</div> 
    <div class="col-md-4 right">demo5</div> 
    <div class="col-md-4 right">demo6</div> 
    <div class="col-md-4 left">demo7</div> 
    </div>

CSS

.row{width:100%} 
.left{width:50%; float:left; min-height:20%; clear:left;} 
.right{width:50%; float:right; margin-left:-50%; min-height:20%; clear:right}

来源

2014-10-06 13:06:42 anujsoft

没有它的不工作，demo3在demo2之后开始。意思是不平行于demo1。看到这个http://www.bootply.com/JeYSGpDbPx – 2014-10-06 13:17:10

如果不想集装箱然后你可以使用下面的代码。

<div class="col-md-12"> 
    <div class="Col-md-6"> 
     <p>Left Side</p> 
    </div> 

    <div class="Col-md-6"> 
     <p>Right Side</p> 
    </div> 
</div>

来源

2014-10-06 14:17:59 Raj

不，我不想这种类型的代码，容器不想意味着没有额外的容器左或右div。一个对我很好。 – 2014-10-07 05:04:49

您可以通过非常少的重新排列来实现所需的视图。

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

看到它在行动here。

来源

2014-10-07 05:42:50 Paras

划分成左右无div div

回答

相关问题