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

359

26 ноября 2016, 18:48

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

Answer 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;   
}

<div class="row"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div> 
<div class="row"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 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; 
}

<div class="blocks"> 
  <div class="blocks-wrapper"> 
    <div class="block">A</div> 
    <div class="block">B</div> 
    <div class="block">C</div> 
    <div class="block">D</div> 
    <div class="block">E</div> 
    <div class="block">F</div> 
    <div class="block">G</div> 
  </div> 
</div>

Answer 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; 
  }

<div class="block borderRightBot"></div> 
<div class="block borderRightBot"></div> 
<div class="block borderBot"></div> 
<div class="clear"></div> 
<div class="block borderRight"></div> 
<div class="block borderRight"></div> 
<div class="block"></div>

Answer 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; 
}

<div class="row"> 
  <div class="block">A</div> 
  <div class="block">B</div> 
  <div class="block">C</div> 
</div> 
<div class="row"> 
  <div class="block">D</div> 
  <div class="block">E</div> 
  <div class="block">F</div> 
</div>