Ставить линию между 3 div-ами

#html #css

Помогите между блоками ставить линии так чтобы было адаптивно


Html



*{
  margin: 0px;
  padding: 0px;
}

.culture {
  text-align: center;
  padding: 80px 50px;
  background: #F9F9F9;
}

.culture h1 {
  font-family: "Montesrrat", sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
}

.culture p {
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  color: #777;
}

.culture .value {
  display: inline-block;
  width: 33%;
  margin-top: 50px;
}

.culture .value .line {
  width: 50%;
  height: 2px;
  background: #787878;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.culture .value .linel {
  left: -100px;
}

.culture .value .liner {
  right: -100px;
}

.culture .value .border {
  border: 3px solid #787878;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 15px;
  vertical-align: middle;
}

.culture .value .border img {
  padding: 12px;
}

.culture .value h1 {
  font-size: 18px;
  font-family: "Montesrrat", sans-serif;
  font-weight: bold;
  color: #222;
}

.culture .value p {
  font-size: 14px;
  color: #777;
  font-weight: "Roboto Slab", serif;
}

  
culture and values
  
Proin iaculis purus consequat cure.
  

    

      
    
    
work-life balance
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  
  

    
    

      
    
    
    
quality over quantity
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  
  

    

      
    
    
deliver excellence
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  





    

Ответы

Ответ 1

holder этих 3 элементов , дать ему background по средине линию , а блокам background
 , выстроить правильно и отступы margin.

Код по ссылке



.parent {
  width:200px ;
  height: 100px;
  background: linear-gradient(to left,#000,#000) no-repeat;
  background-size:100% 2px;
  background-position: 0 50%;
  overflow: hidden;
}
.item {
  float: left;
  width:30% ;
  height: 100px;
  background: #fff;
  margin-right: 5%;
}
.item:last-of-type {
  margin-right: 0;
}
.item-inner {
  width:50%;
  margin:0 auto;
  height: 100px;
  background: blue;
}

      

        

      
      

        

      
      

        

      



Ответ 2

Вот так:



*{
  margin: 0px;
  padding: 0px;
}

.culture {
  text-align: center;
  padding: 80px 50px;
  background: #F9F9F9;
  min-width: 1000px;
}

.culture h1 {
  font-family: "Montesrrat", sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #222;
  text-transform: uppercase;
}

.culture p {
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  color: #777;
}

.culture .value {
  display: inline-block;
  width: 33%;
  margin-top: 50px;
  position: relative;
}
.culture .value:after {
  content: '';
  width: 50%;
  height: 2px;
  position: absolute;
  top: 26px;
  left: 75%;
  background: #787878;
}
.culture .value:last-child:after {
  display: none;
}
.culture .value .border {
  border: 3px solid #787878;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 15px;
  vertical-align: middle;
  padding: 12px;
}

.culture .value .border img {
  width: 30px;
  height: 30px;
}

.culture .value h1 {
  font-size: 18px;
  font-family: "Montesrrat", sans-serif;
  font-weight: bold;
  color: #222;
}

.culture .value p {
  font-size: 14px;
  color: #777;
  font-weight: "Roboto Slab", serif;
}

  
culture and values
  
Proin iaculis purus consequat cure.
  

    

      
    
    
work-life balance
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  
  

    

      
    
    
quality over quantity
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  
  

    

      
    
    
deliver excellence
    
Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum
suscipitn aenean rhoncus posuere odio in tincidunt.
  






Я еще добавил min-width для .culture, чтобы не распадалось в примере на  SO.