主页 / 问题 / 673777
Accepted
Byulent
Asked:2020-06-01 18:28:47 +0000 UTC2020-06-01 18:28:47 +0000 UTC

如何在块之间制作这样的线？

  • 772

有这样的块布局：

* {
width:576px;
}
.item {
    border: 1px #dededc solid;
    height: 232px;
}

#four-blocks {
    overflow: hidden;
}

#four-blocks .item {
    width: 280px;
    float: left;
    margin-bottom: 10px;
}

#four-blocks .item:nth-child(1), .item:nth-child(3){
    margin-right: 11px;
    /*box-shadow: 0 3px 0 3px coral;*/
}
<div id="four-blocks">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>

有必要在水平和垂直方向上用一条线分隔块，如下所示：

在此处输入图像描述

怎么做？我不是在想象什么。

html

2 个回答

  1. Best Answer

    这可以通过伪类和伪:nth-child元素来完成，:before并且:after

    #four-blocks {
  overflow: hidden;
  width: 580px;
}

#four-blocks .item {
  border: 1px #dededc solid;
  height: 232px;
  float: left;
  position: relative;
  width: 280px;
}

#four-blocks .item:nth-child(-n + 2) {
  margin-bottom: 13px;
}

#four-blocks .item:nth-child(-n + 2):before {
  content: '';
  background: #F2F2F0;
  height: 1px;
  position: absolute;
  bottom: -8px;
  width: 100%;
}

#four-blocks .item:nth-child(2n + 1) {
  margin-right: 13px;
}

#four-blocks .item:nth-child(2n + 1):after {
  content: '';
  background: #F2F2F0;
  height: 100%;
  position: absolute;
  right: -8px;
  width: 1px;
}
    <div id="four-blocks">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    • 5

  2. 下午好，我这样解决了你的问题，我在两个块中为每个添加了两个块。并从父块中给它们绝对定位，之后我们就可以将它们移动到我们需要的地方。我们的行将是<div>带有类的块item。

    #four-blocks{
  width: 180px;
}
#four-blocks .item_cont{
  position: relative;
  width: 80px;
  float: left;
  margin-bottom: 11px;
  height: 80px;
  border: 1px #dededc solid;
}
#four-blocks .item_cont .item{
  position: absolute;
  background: #dededc;
}
#four-blocks .item_cont .item:nth-child(1){
  width: 80px;
  height: 1px;
}
#four-blocks .item_cont .item:nth-child(2){
  width: 1px;
  height: 80px;  
}
#four-blocks .item_cont:first-child .item:nth-child(1){  
  bottom: -7px;
}
#four-blocks .item_cont:first-child .item:nth-child(2){
  right: -7px;
}

#four-blocks .item_cont:last-child .item:nth-child(1){
  top: -7px;
}
#four-blocks .item_cont:last-child .item:nth-child(2){
  left: -7px;
}


#four-blocks {
    overflow: hidden;
}


#four-blocks .item_cont:nth-child(1), .item_cont:nth-child(3){
    margin-right: 11px;
}
    <div id="four-blocks">
    <div class="item_cont">
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="item_cont"></div>
    <div class="item_cont"></div>
    <div class="item_cont">
      <div class="item"></div>
      <div class="item"></div>
    </div>
</div>

    • 0

相关问题