html - 行在列中向上划分，列的两侧都有 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

我在秋季类 div 中添加了 div，它将出现在父 div 的左侧(或右侧)。

我使用 position:absolute 完成了此操作，为了使其正常工作，我将 position:relative 添加到父 div:div.fall >.

我还从 .fall divs 中删除了 overflow:hidden 这是一个 fiddle :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;
}