Question

我有两个div：<div class="top"></div>和<div class="bottom"></div>，它们填满了顶部＆amp;分别是页面的下半部分。

我想在这两个div之间留出50px的间隙，以便它们后面的元素（<div class="clickable"></div>）可以在该间隙内点击。

在下面的示例中，我有点伪造它，以便您了解我想要的设计，并且可点击区域显然不可点击（由于其上方存在的边界）< / p>

您对如何实现这一点有什么想法吗？查看我的JSFIDDLE，了解我正在谈论的内容

我使用的渐变是top和bottom的必要背景以及50％高度，它们之间有50px的间隙。我没有为top和bottom寻找特定高度的解决方案。

HTML：

<div class="container">
    <div class="clickable"></div>
    <div class="top">
        <div></div>
    </div>
    <div class="bottom">
        <div></div>
    </div>
</div>

CSS：

* {
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

html, body {
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0;
}
.container {
    position: relative;
    float: left;
    width: 100%;
    height: 150px;  
}
.clickable {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
    cursor: pointer;
}
.top,.bottom {
    position: relative;
    float: left;
    width: 100%;
    height: 50%;
}
.top div,.bottom div {
    float: left;
    width: 100%;
    height: 100%;
}
.top {
    border-bottom: 25px solid transparent;
}
.bottom {
    border-top: 25px solid transparent;
}

.top div {
    background: -moz-linear-gradient(top,  rgba(147,189,69,1) 0%, rgba(125,185,232,0) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,189,69,1)), color-stop(100%,rgba(125,185,232,0)));
    background: -webkit-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: -o-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: -ms-linear-gradient(top,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    background: linear-gradient(to bottom,  rgba(147,189,69,1) 0%,rgba(125,185,232,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93bd45', endColorstr='#007db9e8',GradientType=0 );
}
.bottom div {
    background: -moz-linear-gradient(top,  rgba(125,185,232,0) 0%, rgba(147,189,69,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(147,189,69,1)));
    background: -webkit-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,185,232,0) 0%,rgba(147,189,69,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#93bd45',GradientType=0 );
}

Answer 1

您可以使用calc和margin来创建差距（这就是它的用途）......除非您需要，否则不需要浮点数。

Calc支持IE9及以上版本：CanIUse.com

＆＃13;

* {
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
html,
body {
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
}
.container {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.clickable {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: red;
  cursor: pointer;
}
.top,
.bottom {
  position: relative;
  height: calc(50% - 25px);
}
.top {
  margin-bottom: 50px;
}
.top div,
.bottom div {
  height: 100%;
}
.top div {
  background: lightblue;
}
.bottom div {
  background: lightgreen
}

＆＃13;

<div class="container">
  <div class="clickable"></div>
  <div class="top">
    <div></div>
  </div>
  <div class="bottom">
    <div></div>
  </div>
</div>

＆＃13;

边框后面的可点击区域？

1 个答案: