Блог

Главная - Вопросы по программированию - Разделение значков и горизонтальная линия позади

Разделение значков и горизонтальная линия позади

#css

#css

Вопрос:

Я ищу любую проблему, но безрезультатно. У меня большая проблема с разделением значков во встроенном блоке после добавления css spearation ::after и ::before в средний значок и с его rwd.вот мой код.

HTML:

 <div class="icon-box">
            <div class="icon_1"></div>
            <div class="icon_2"></div>
            <div class="icon_3"></div>
 </div>

CSS:

 .icon_1 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/timing_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}
.icon_2 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/presentation_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}
.icon_3 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/accurate_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}

.icon_2::before,
.icon_2::after {
  display: inline-block;
  content: "";
  height: 10px;
  border-bottom: 1px solid #97735e;
  width: 100%;
}
.icon_2::before {
  right: 100%;
  margin-right: 10%;
}
.icon_2::after {
  left: 100%;
  margin-left: 200%;
}

Я думаю, что мой код очень грязный и его нужно исправить.

эффект, который я хочу получить, введите описание изображения здесь

Комментарии:

1. Вы могли бы лучше просто использовать afters, никаких befores. Затем просто на последнем дочернем элементе удалите строку.

2. Нет смысла иметь display: inline-block , когда ваш элемент плавающий

3. есть некоторые проблемы с вашим кодом. я объяснил ниже. дайте мне знать, если это сработает для вас

Ответ №1:

Первый. у вас есть общие стили для всех .icon_1,.icon_2,.icon_3 разделов, кроме background-image . итак, дайте общий класс icon , например, для всех этих разделов, или, если вы не можете изменить HTML, используйте .icon_1,.icon_2,.icon_3 вместо .icon в моем примере ниже. но не пишите одни и те же стили 3 раза.

второй. либо используйте display:inline-block , либо используйте float:left . я решил использовать float:left; , потому inline-block что добавляет дополнительные пробелы между элементами. (если вы хотите использовать inline-block , дайте мне знать. есть способы переопределить пробелы . )

в-третьих. добавить margin:0 15px к .icon_2 которому добавляет margin-left и margin-right 15px

четвертое. добавьте pseudo-element ( :before в моем примере) в div, который оборачивает три значка соответственно .icon-box . и оформите его так, как вы хотите.

я добавил z-index:-1 так, чтобы строка ( :before ) проходила под значками. добавлено background:red к нему, чтобы вы могли видеть, что оно находится под значками.

 .icon {

  float:left;
  height: 66px;
  width: 66px;

  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
}
.icon_1 { 
      background-image: url("../img/timing_icon.png");
 }
.icon_2 {
  background-image: url("../img/presentation_icon.png");
    margin:0 15px;
}

.icon_3 {
  background-image: url("../img/accurate_icon.png");
 }
.icon-box { position:relative;width:auto;float:left;}
.icon-box:before {
  content:"";
  position:absolute;
  height:1px;
  background:red;
  top:50%;
  width:100%;
  left:0;
  z-index:-1;
}  
 <div class="icon-box">
            <div class="icon icon_1"></div>
            <div class="icon icon_2"></div>
            <div class="icon icon_3"></div>
 </div>