劃分成左右無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

回答

相關問題