jquery - 如何让两个元素向右浮动

Question

我创建了一个显示工作 Angular 色的 Accordion 。在顶部 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，然后通过添加一些padding将img稍微向左移动-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>