Подскажите, как сделать такие бордеры?

#html #css #вёрстка

Подскажите, как сделать такие бордеры?
Все эти пункты представляют из себя дивы, которым задан float left.


    

Ответы

Ответ 1

Например еще так:



.item+.item {
  border-left: 1px solid #ccc;
}

.row+.row{
  border-top: 1px solid #ccc;
}


/* Доп. стилизация для наглядности */
* {
  box-sizing: border-box;
}

.row {
  overflow: hidden;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.item {
  width: 33.3333%;
  height: 200px;  
}

  

  

  



  

  

  




Ответ 2

Если число колонок заранее неизвестно, можно рисовать границы у всех, но при этом
скрывать границы слева и сверху с overflow:hidden. Хотя, подозреваю, это не очень-то
корректно.

https://jsfiddle.net/7kputd11/



.blocks {
  overflow: hidden;
}

.blocks-wrapper {
  margin: -1px 0 0 -1px;
}

.block {
  float: left;
  width: 200px;
  height: 120px;
  
  border-left: 1px solid;
  border-top: 1px solid;
}

  

    
A
    
B
    
C
    
D
    
E
    
F
    
G
  



Ответ 3

.block {
  width: 150px;
  height: 150px;
  float: left;
  }
.clear {
  width: 100%;
  clear: both;
  }
.borderRightBot {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  }
.borderBot {
  border-bottom: 1px solid #000;
  }
.borderRight {
  border-right: 1px solid #000;
  }









Ответ 4

.block {
  border: 1px solid #aaa;
  border-bottom: 0;
  border-right: 0;
  float: left;
  width: 33%;
  height: 120px;
  text-align: center;
  line-height: 120px;
}

.block:first-child {
  border-left: 0;
}

.row:first-child .block {
  border-top: 0;
}

  
A
  
B
  
C


  
D
  
E
  
F