line div的列在列的任何一側與2列

Question

我想獲得列的div排列像這個圖像，其中有2個獨立的div排成列的左側或右側（右邊的項目與列中的項目5相關聯，左邊的項目與項目6）

有沒有辦法用css做到這一點？

這裏是我有：

<div id="waterfall"> 
<div class="fall" id="water1">Defaulter’s Initial Margin</div> 
<div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div> 
<div class="fall" id="water3">Clearing House Contribution $20 Million</div> 
<div class="fall" id="water4">Guaranty Fund<br>Total Value XX Million</div> 
<div class="fall" id="water5">Unfunded contributions - assessment</div> 
<div class="fall" id="water6">Service Continuity Phase</div> 
<div class="fall" id="water7">Service Closure</div> 
</div> 

和我的CSS是這樣的：

.fall { 
overflow:hidden; 
margin: 0 auto 10px; 
color:white; 
text-align:center; 
width: 33%; 
padding: 10px; 
text-transform:uppercase; 

} 
#water2:after { 
    border-top: 80px solid #0099CC; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    bottom: 0px; 
    content: ""; 
    position: absolute; 
    left: 45%; 
    margin-left: -21px; 
    width: 0; 
    height: 0; 
} 
#water1 {background-color:#686868;} 
#water2 {background-color:#797979;} 
#water3 {background-color:#828282;} 
#water4 {background-color:#8B8B8B;} 
#water5 {background-color:#949494;} 
#water6 {background-color:#9D9D9D;} 
#water7 {background-color:#AFAFAF;} 

感謝您的幫助。

Answer 1

我在fall class div裏面添加了div，它會出現在父div的左邊（或右邊）。

我完成了這個使用position: absolute和它的工作我添加position: relative父母的div：div.fall。

此外，我除去從.fall divs 這裏overflow: hidden是一個小提琴：http://jsfiddle.net/srup9b59/5/或full screen

HTML：

<div id="waterfall"> 
    <div class="fall" id="water1">Defaulter’s Initial Margin</div> 
    <div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div> 
    <div class="fall" id="water3">Clearing House Contribution $20 Million</div> 
    <div class="fall" id="water4">Guaranty Fund 
     <br>Total Value XX Million</div> 
    <div class="fall" id="water5">Unfunded contributions - assessment 
     <div class="test_left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div> 
    </div> 
    <div class="fall" id="water6">Service Continuity Phase 
     <div class="test_right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text</div> 
    </div> 
    <div class="fall" id="water7">Service Closure</div> 
</div> 

CSS：

.fall { 
    margin: 0 auto 10px; 
    color:white; 
    text-align:center; 
    width: 33%; 
    padding: 10px; 
    text-transform:uppercase; 
    color: red; 
    position: relative; 
} 
#water2:after { 
    border-top: 80px solid #0099CC; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    bottom: 0px; 
    content:""; 
    position: absolute; 
    left: 45%; 
    margin-left: -21px; 
    width: 0; 
    height: 0; 
} 
.test_left { 
    border: 1px solid black; 
    color: black; 
    height: auto; 
    left: -260px; 
    position: absolute; 
    text-align: left; 
    width: 300px; 
} 
.test_right { 
    border: 1px solid black; 
    color: black; 
    height: auto; 
    right: -260px; 
    position: absolute; 
    text-align: left; 
    width: 300px; 
} 

Answer 2

這將是實現比較簡單，如果附加信息的彈出框與其相鄰的頂部對齊nt <div>而不是垂直居中。爲此，我會將<div class="popout>放入.fall元素內。確保.fall設置爲position: relative;，您可以輕鬆定位附加內容。

一個簡單的JS小提琴解釋：https://jsfiddle.net/L0s28c6s/

垂直居中是你需要額外的內容（.popout元素），以不擾亂.fall要素的流動做，espcially這裏一件很難的事情。

不那麼優雅的解決方案是使用JS定位彈出元素。獲得.fall項目的座標並減去其高度的一半以找到其垂直中心。然後獲得.popout的高度，將其減半，然後從前面提到的yPos中減去此值... 儘管我不推薦這種解決方案 - 使用JS這種佈局會帶來效率低下和用戶開銷。

Answer 3

HTML

<div id="waterfall"> 
    <div class="fall" id="water1">Defaulter’s Initial Margin</div> 
    <div class="fall" id="water2">Defaulter’s Guaranty Fund Contribution</div> 
    <div class="fall" id="water3">Clearing House Contribution $20 Million</div> 
    <div class="fall" id="water4">Guaranty Fund<br>Total Value XX Million</div> 
    <div class="fall" id="water5">Unfunded contributions - assessment 
     <div class="text-box" id="text-box-2">text text text text text text text 
       text text text text text text text text text text text text</div> 
    </div> 
    <div class="fall" id="water6">Service Continuity Phase 
     <div class="text-box" id="text-box-1">text text text text text text 
       text text text text text text text text text text text text text</div> 
    </div> 
    <div class="fall" id="water7">Service Closure</div> 
</div><!-- end #waterfall --> 

注：

• 側的div嵌套在相關聯的div .fall

CSS

html, body { height: 100%; } 

#waterfall { 
    height: 100%; 
    position: relative; 
} 

.fall { 
    overflow: visible; 
    margin: 0 auto 10px; 
    color:white; 
    text-align:center; 
    width: 33%; 
    padding: 10px; 
    text-transform:uppercase; 

} 
#waterfall:after { 
    border-top: 80px solid #0099CC; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    bottom: 0; 
    content: ""; 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, 0); 
    width: 0; 
    height: 0; 
} 
#water1 {background-color:#686868;} 
#water2 {background-color:#797979;} 
#water3 {background-color:#828282;} 
#water4 {background-color:#8B8B8B;} 
#water5 {background-color:#949494; position: relative;} 
#water6 {background-color:#9D9D9D; position: relative;} 
#water7 {background-color:#AFAFAF;} 

.text-box { 
    height: 75px; 
    width: 125px; 
    font-size: .7em; 
    text-align: left; 
    color: black; 
    padding: 2px; 
    border: 1px solid #ccc; 
    background-color: #eee; 
} 

#text-box-1 { 
    position: absolute; 
    bottom: -20px; 
    left: -175px; 
} 

#text-box-1::after { 
    content: "\2192"; 
    font-size: 3em; 
    color: #ccc; 
    position: absolute; 
    left: 123px; 
    top: 11px; 
} 

#text-box-2 { 
    position: absolute; 
    bottom: -20px; 
    right: -170px; 
} 

#text-box-2::before { 
    content: "\2190"; 
    font-size: 3em; 
    color: #ccc; 
    position: absolute; 
    left: -29px; 
    top: 10px; 
} 

注意：給定position: relative建立它們作爲最近的定位的祖先絕對定位

側的div（#text-box-1 & #text-box-2）

• .fall div容器（#water5 & #water6）絕對相對於容器的div定位
• 箭頭（僞元素）絕對相對於側邊定位
• CSS encoding用於改變到overflow: visible所以側的div箭頭
在 .fall
• overflow: hidden具有可視性
• 關於藍色向下箭頭，我施加精確水平定心。我也將它放在容器的底部（#waterfall）。它的定位相對於.fall div #water2。它仍然會在屏幕垂直重新調整大小時重疊內容，但這可能是您想要的。我沒有花太多時間在這個項目上，因爲我不知道它對佈局有多重要，它不是問題的一部分。

---

上面的代碼將呈現這樣的：

DEMO：http://jsfiddle.net/wxzrn6sc/1/