Question

我无法弄清楚为什么我在2个div之间有一个额外的垂直空间

这是小提琴链接https://jsfiddle.net/karimmtlc/bqt1r4y2/

这是代码：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>   
    </head>
    <body>
        <div class="row-fluid">
        <div id="voyage_map"  style="width: 100%; height: 400px; padding:0px;margin:0px;background-color:blue;">
        </div>
        <div id="voyage_map_container" style="z-index:1000000000000; background: rgba(0, 0, 0, 0.6);position:relative;top:-120px; min-height:120px; color:white;padding-top:0px;padding-left:10px;padding-right:10px; padding-bottom:5px;"><div class="row"><div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" style="padding-top:2px;"><h3 style="padding-top:0px;"><strong>Title here</strong></h3><div id="trun3">Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhjdajfb fdhdf chcdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb sgsghgs shgfhdg dhhdshdhfgd dcbdhhsdb Start making your clients happy! shhhe ejhj shs sbsbhsbds sbsdbsbd Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy! Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!Start making your clients happy!</div></div><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right" style="padding-top:5px;"><h3 style="padding-top:2px;"><strong>MAY 26TH-29TH 2015</strong></h3></div></div></div>
        <div style="background-color: green;min-height=100;">ssdsdsdsdsd</div>
        </div>

    </body>
</html>

我想摆脱的额外垂直空间是在灰色背景和绿色背景之间。

由于

Answer 1

您的div [{1}}位于相对位置并且#voyage_map_container。

编辑以下内容：

top:-120px;

要：

<div id="voyage_map_container" style="z-index:1000000000000; background: rgba(0, 0, 0, 0.6);position:relative;top:-120px; min-height:120px; color:white;padding-top:0px;padding-left:10px;padding-right:10px; padding-bottom:5px;">

如果按照设计你需要像现在这样定位那个元素，你也可以将<div id="voyage_map_container" style="z-index:1000000000000; background: rgba(0, 0, 0, 0.6);position:relative; min-height:120px; color:white;padding-top:0px;padding-left:10px;padding-right:10px; padding-bottom:5px;">添加到同一个元素中，以便＆＃34;拉＆＃34;下面的元素。

添加额外的垂直空间而不需要

1 个答案: