Question

我需要将元素放置在div内，这是当前的div：

这是所需的：

这是html和css的代码

#channel-header * {
  display: inline-block;
}

#channel-title {
  position: absolute;
}

<div id="channel-header">
  <img src="images/lfc-kanal.png" id="avatar-kanala">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
    <a href="#" class="button" id="sub-button">Subscribe 828K</a>
  </div>
</div>

Answer 1

我建议使用flexbox轻松创建3列并具有垂直对齐方式。

#channel-header {
  display: flex;
  align-items: center;
  /* Vertical alignment */
  justify-content: flex-start;
  /* Horizontal alignment */
}

img {
  border-radius: 100%;
}

.button {
  text-decoration: none;
  color: white;
  background-color: red;
  border-radius: 50px;
  padding: 1rem;
  margin-left: auto;
}

#channel-title {
  margin-left: 2rem;
}

<div id="channel-header">
  <img src="https://via.placeholder.com/150x150" id="avatar-kanala">
  <div id="channel-title">
    <h3>LFCOfficial</h3>
    <p>828,277 subscribers</p>
  </div>
  <a href="#" class="button" id="sub-button">Subscribe 828K</a>
</div>

在div内定位元素，内联

1 个答案: