如何让css元素拥抱其下方或上方的另一个元素?

时间:2017-09-05 21:53:08

标签: html css css3

我正在尝试让多个CSS形状彼此拥抱。谷歌搜索时,我发现的唯一建议是我应该使用内联块。但是,我似乎无法按照我的意愿让它工作。虽然它允许彼此相邻的形状拥抱,但它似乎不允许形状拥抱它们上方和下方的元素。

示例:如果我想用三角形制作dimond:



.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}

<div class="r_tleft"></div>
<div class="r_tright"></div>
<div class="r_bleft"></div>
<div class="r_bright"></div>
&#13;
&#13;
&#13;

结果如下所示:

◢◣◥◤

如果我要添加休息时间,就像这样......

<div class="r_tleft"></div><div class="r_tright"></div>
<br>
<div class="r_bleft"></div><div class="r_bright"></div>

&#13;
&#13;
.r_tleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent #007bff transparent;
  display: inline-block;
}

.r_tright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 25px;
  border-color: transparent transparent transparent #64C7CC;
  display: inline-block;
}

.r_bleft {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 25px 0;
  border-color: transparent #64C7CC transparent transparent;
  display: inline-block;
}

.r_bright {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 25px 0 0;
  border-color: #007bff transparent transparent transparent;
  display: inline-block;
}
&#13;
<div class="r_tleft"></div>
<div class="r_tright"></div>
<br>
<div class="r_bleft"></div>
<div class="r_bright"></div>
&#13;
&#13;
&#13;

相反,这发生了:

◢◣

◥◤

如所暗示的那样,这两个人都没有达到预期的效果。

2 个答案:

答案 0 :(得分:0)

如果您将每个项目包裹在div中,您将获得所需的效果。然后你可以在包装器div上使用css来使它们尽可能地关闭。

&#13;
&#13;
.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}
&#13;
 <div><div class="r_tleft"></div><div class="r_tright"></div></div>
    <div><div class="r_bleft"></div><div class="r_bright"></div></div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你几乎拥有它,但考虑到使元素inline-block使它们成为内联,所以行属性应用于它们。在您的情况下,删除调整容器块上line-height的垂直空间:

.r_tleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 25px 25px;
    border-color: transparent transparent #007bff transparent;
    display:inline-block;
}

.r_tright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 0 25px;
    border-color: transparent transparent transparent #64C7CC;
    display:inline-block;
}

.r_bleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent #64C7CC transparent transparent;
    display:inline-block;
}

.r_bright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: #007bff transparent transparent transparent;
    display:inline-block;
}
<div style="line-height: 0px">
  <div class="r_tleft"></div><div class="r_tright"></div>
  <br>
  <div class="r_bleft"></div><div class="r_bright"></div>
</div>