Question

我创建了一个显示工作角色的手风琴。在顶部div的右侧，假设在“ x”关闭按钮之前有一个图像。像这样：

但是，到目前为止，图像是在“ x”之后出现的，这不是我想要的。

我的HTML：

<div class="acc">
  <div class="acc-titel">Graphic Designer - London <span><img src="http://via.placeholder.com/60x60" alt=""></span></div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

我的CSS：

.acc-titel {
  position: relative;
  background: #fff;
  padding: 20px;
  margin-bottom: 15px;
  color: #08455c;
  transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
  border: 2px solid #08455c;
  span{
    float: right;
    margin-top:-12px;
  }
}

.acc-titel:after {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  content: "+";
  font-size: 1.8em;
  line-height: 0.7em;
  color: #08455c;
  float: right !important;
  text-align: center;
  display: block;
  transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);  
}

.acc-titel:hover {
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}

.active:after {
  transform: rotate(405deg);
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}

.acc-content p {
  font-size: 16px;
}

我的问题的密码笔是https://codepen.io/mrsalami/pen/LBazMm

Answer 1

鉴于您期望的输出以及您使用::after伪元素来创建+ / x字符的事实，使用绝对定位来实现此目的更为有意义。

您可以在图标上设置top和right，然后通过向其中添加一些img，将padding-right稍微向左移动，以免发生冲突。试试这个：

var accordion = document.getElementsByClassName("acc-titel");
var i;

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var showContent = this.nextElementSibling;
    if (showContent.style.maxHeight) {
      showContent.style.maxHeight = null;
      showContent.style.opacity = null;
      showContent.style.transform = "translateY(5px)";
    } else {
      showContent.style.maxHeight = showContent.scrollHeight + "px";
      showContent.style.opacity = "1";
      showContent.style.transform = "translateY(0px)";
    }
  });
}

.acc-titel {
  position: relative;
  background: #fff;
  padding: 20px;
  margin-bottom: 15px;
  color: #08455c;
  transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
  border: 2px solid #08455c;
}

.acc-titel span {
  float: right;
  margin-top: -12px;
  padding: 0 40px 0 0;
}

.acc-titel:after {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  content: "+";
  font-size: 1.8em;
  line-height: 0.7em;
  color: #08455c;
  text-align: center;
  display: block;
  transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);
  position: absolute;
  right: 15px;
  top: 15px;
}

.acc-titel:hover {
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}

.active:after {
  transform: rotate(405deg);
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}

.acc-content p {
  font-size: 16px;
}

<div class="acc">
  <div class="acc-titel">Graphic Designer - London <span><img src="http://via.placeholder.com/60x60" alt=""></span></div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

Answer 2

var accordion = document.getElementsByClassName("acc-titel");
var i;

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener("click", function() {
    this.classList.toggle("active");

    var showContent = this.nextElementSibling;
    if (showContent.style.maxHeight) {
      showContent.style.maxHeight = null;
      showContent.style.opacity = null;
      showContent.style.transform = "translateY(5px)";
    } else {
      showContent.style.maxHeight = showContent.scrollHeight + "px";
      showContent.style.opacity = "1";
      showContent.style.transform = "translateY(0px)";
    }
  });
}

.acc-titel {
  position: relative;
  background: #fff;
  padding: 20px;
  margin-bottom: 15px;
  color: #08455c;
  transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 30px;
  border: 2px solid #08455c;
  
}
.acc-titel span{
    position: absolute;
    right: 58px;
    top: 8px
}
.acc-titel:after {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 100;
  content: "+";
  font-size: 1.8em;
  line-height: 0.7em;
  color: #08455c;
  float: right !important;
  text-align: center;
  display: block;
  transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);  
}

.acc-titel:hover {
  z-index: 2;
  cursor: pointer;
  box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}

.active:after {
  transform: rotate(405deg);
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #fff;
  padding: 0 20px;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}

.acc-content p {
  font-size: 16px;
}

<div class="acc">
  <div class="acc-titel">Graphic Designer - London <span><img src="http://via.placeholder.com/60x60" alt=""></span></div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

将跨度保持图像的位置设置为绝对，并调整顶部和右侧。

Answer 3

有很多解决方法。

您应该始终首先以正确的顺序排列HTML，并在诉诸伪元素或浮点数之前尝试解决大多数问题。

&ts

然后将CSS添加到i元素。

<div class="acc">
  <div class="acc-titel">Graphic Designer - London <span><img src="https://via.placeholder.com/60x60" alt=""><i class="closeBtn">+</i></span></div>
  <div class="acc-content">
    <h2>Lorem ipsum dolor sit</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
  </div>
</div>

不要不必要地使用！important。

Answer 4

只需在CSS中指定一个“前”伪元素而不是“后”，就可以实现所需的目标，

Set-Cookie

如何使两个元素向右浮动

4 个答案: