Question

我试图让一列div像这个图像一样排列，其中有两个单独的div排列在列的左侧或右侧（项目到右侧与列中的项目5和项目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。

我还从overflow: hidden移除了.fall divs 这是一个小提琴：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

如果附加信息的弹出框与其相邻<div>的顶部对齐而不是垂直居中，则实现起来相对简单。为此，我会将<div class="popout>放在.fall元素中。确保.fall设置为position: relative;，您可以轻松定位其他内容。

一个简单的JS小提琴解释：https://jsfiddle.net/L0s28c6s/

垂直居中很难做到，特别是在这里你需要额外的内容（.popout元素）来不破坏.fall元素的流动。

不太优雅的解决方案是使用JS来定位弹出元素。获取.fall项的坐标并减去其高度的一半以找到其垂直中心。然后获得.popout的高度，将其减半，然后从前面提到的yPos中减去它...... 我不推荐这个解决方案 - 使用JS进行这样的布局充满了用户的低效率和开销。

Answer 3

<强> HTML

.fall

注意：

side divs嵌套在关联的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; } divs

<强> CSS

.fall

注意：

#water5容器div（#water6＆amp; position: relative）给予#text-box-1以确定它们是绝对定位的最近定位祖先
旁边div（#text-box-2＆amp; overflow: hidden）绝对相对于容器div
箭头（伪元素）绝对相对于side divs
CSS encoding用于箭头

.fall

overflow: visible

#waterfall

关于蓝色向下箭头，我应用了精确的水平居中。我还将它放在容器的底部（.fall）。它已相对于#water2 div 10001定位。它仍然会在屏幕垂直重新调整大小时重叠内容，但这可能就是您想要的。我没有花太多时间在这个项目上，因为我不知道它对布局有多重要，这不是问题的一部分。

上面的代码呈现了这个：

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

line div在列的两侧以2列为单位

3 个答案: