Отзывчивая фоновая линия между горизонтальными изображениями

Question

У меня есть 4 деления, как показано ниже

.bxsection {
  width: 100%;
  height: auto;
  float: left;
}

.sng {
  float: left;
  margin: 0px !important;
  margin-right: 0px !important;
  max-width: 25%;
}

.workbox {
  text-align: center;
}

.sectionboximg {
  text-align: center;
  width: 90px;
  height: 90px;
  display: inline-block;
  border-radius: 57px;
  border: solid 1px #777777;
  overflow: hidden;
  padding: 15px;
}

.sectionboximg img {
  width: 100%;
  height: 100%;
  opacity: 80%;
  vertical-align: middle;
  border-style: none;
}

.sectionboximg img::after {
  width: 130px;
  height: 2px;
  background-color: #e6e6e6;
  content: "";
  position: absolute;
  display: block;
  right: -65px;
  top: 45px;
  border-bottom: 1px solid #e6e6e6;
  z-index: 0;
}

<div class="bxsection">
  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_1 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>

  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_2 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_3 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_4 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>
</div>

Проблема, с которой я сталкиваюсь, заключается в том, что ширина линий дана в пикселях (130 пикселей), что приведет к проблемам с адаптивным дизайном. Что мне нужно, это 1. линии должны быть выровнены к задней части круговых изображений. 2. ширина линий должна корректироваться так, чтобы при более высоком или более низком разрешении мы не видели никаких промежутков между кругом и линией

образец изображения

Answer 1

Вот решение,

Пожалуйста, запустите его на весь экран

CSS: -

.bxsection {
  width: 100%;
  height: auto;
  float: left;
}

.sng {
  float: left;
  margin: 0px !important;
  margin-right: 0px !important;
 
}

.workbox {
    text-align: center;
    margin-right: -25px;
}

.sectionboximg {
    text-align: center;
    width: 90px;
    height: 90px;
    margin-left: 50px;
    margin-right: 50px;
    display: inline-block;
    border-radius: 57px;
    border: solid 1px #777777;
    overflow: hidden;
    padding: 15px;
}

.sectionboximg img {
  width: 100%;
  height: 100%;
  opacity: 80%;
  vertical-align: middle;
  border-style: none;
}

.sectionboximg img::after {
    width: 76px;
    height: 2px;
    margin-left: 60px;
    background-color: #e6e6e6;
    content: "";
    position: absolute;
    display: block;
    /* right: -65px; */
    top: 65px;
    border-bottom: 1px solid #e6e6e6;
    z-index: 0;
}

@media all and (min-width:1050px) and (max-width:1100px){
  
  .workbox {
    text-align: center;
    margin-right: -55px;
}
  
  .sectionboximg img::after {
    width: 45px;
    height: 2px;
    margin-left: 60px;
    background-color: #e6e6e6;
    content: "";
    position: absolute;
    display: block;
    /* right: -65px; */
    top: 65px;
    border-bottom: 1px solid #e6e6e6;
    z-index: 0;
}
}

@media all and (min-width:1000px) and (max-width:1049px){
  
  .workbox {
    text-align: center;
    margin-right: -55px;
}
  
  .sectionboximg img::after {
    width: 40px;
    height: 2px;
    margin-left: 60px;
    background-color: #e6e6e6;
    content: "";
    position: absolute;
    display: block;
    /* right: -65px; */
    top: 65px;
    border-bottom: 1px solid #e6e6e6;
    z-index: 0;
}
}

Your HTML CODE:-

<div class="bxsection">
  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_1 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>

  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_2 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_3 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_4 ">
    		 <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>
</div>

Answer 2

Существует два метода решения этой проблемы:

• Первый - вы можете сделать одну большую линию, которая находится за кругом, с помощью абсолютного позиционирования и z-индекса и имеет ширину, определенную в% единицах. Линии будут видны внутри круга, только если внутри ничего нет (в нем нет изображения или цветовой заливки), но, эй, вы собираетесь заполнить изображение, я думаю, внутри него.

• Секунда Вы можете использовать функцию cal c (), предоставляемую CSS, которая будет динамически определять длину строки. Подробнее об этом читайте на этой странице: https://developer.mozilla.org/en/docs/Web/CSS/calc

Я использовал первый метод и вот код

HTML Код

<div class="bxsection">
  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_1 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>

  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_2 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_3 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>


  <div class="col-md-2 col-sm-4 col-xs-12 sng">
    <div class="sectionbox workbox">
      <div class=sectionboximg img_4 ">
             <img src="<something>" alt="">
      </div>
      <div class="sectionboxhead">sample content</div>
    </div>
  </div>
  <div class="temporary"></div>
</div>

CSS Код

.bxsection {
  width: 100%;
  height: auto;
  float: left;
}

.sng {
  float: left;
  margin: 0px !important;
  margin-right: 0px !important;
  max-width: 25%;
}

.workbox {
  text-align: center;
}

.sectionboximg {
   text-align: center;
  width: 90px;
  height: 90px;
  display: inline-block;
  border-radius: 57px;
  border: solid 1px #777777;
  overflow: hidden;
  padding: 15px;
}

.sectionboximg img {
  width: 100%;
  height: 100%;
  opacity: 80%;
  vertical-align: middle;
  border-style: none;
}

.temporary {
  width: 70%;
  height: 2px;
  background-color: #e6e6e6;
  position: absolute;
  display: block;
  left: 15%;
  top: 45px;
  border-bottom: 1px solid #e6e6e6;
  z-index: -1;
}