围绕元素定位元素

Question

我需要像上图那样将元素放置在一侧，并在它们上具有 onclick 功能以显示相应的文本。有关如何最好地实现这一点以做出响应的任何信息？ 响应式是指点和文本应始终保持在相对于瓶子大小的相同位置。

我所做的是将所有内容放入容器 div 中，然后将元素相对于该 div 定位，并将瓶子图像定位到容器 div 的绝对位置。 当容器 div 具有固定尺寸时，它有点工作，但我想有更好的方法来做到这一点。

编辑：添加代码！格式化很烂，抱歉。

<div class="bottle-one">
                            <div class="bottle-one-content">
                            <div class="bottle-one-image">
                                <div class="message">
                                    <div class="message-hidden">
                                        <div>
                                            text
                                        </div>
                                        <div>
                                            <img src="assets/images/icons/line_blue.svg" alt="">
                                        </div>
                                    </div>
                                    <a href="#msg1" class="droplet droplet1 js-drop">
                                        <img src="assets/images/icons/droplet.svg">
                                    </a>
                                </div>
                                <div class="message">
                                    <div class="message-hidden">
                                        <div>
                                            text
                                        </div>
                                        <div>
                                            <img src="assets/images/icons/line_blue.svg" alt="">
                                        </div>
                                        <a href="#msg2" class="droplet droplet2 js-drop">
                                            <img src="assets/images/icons/droplet.svg">
                                        </a>
                                    </div>
                                </div>
                                <div class="message">
                                    <div class="message-hidden">
                                        <div>
                                            text

                                        </div>
                                        <div>
                                            <img src="assets/images/icons/line_blue.svg" alt="">
                                        </div>
                                        <a href="#msg3" class="droplet droplet3 js-drop">
                                            <img src="assets/images/icons/droplet.svg">
                                        </a>
                                    </div>
                                </div>
                                <div class="message">
                                    <div class="message-hidden">
                                        <div>
                                            text
                                        </div>
                                        <div>
                                            <img src="assets/images/icons/line_blue.svg" alt="">
                                        </div>
                                        <a href="#msg4" class="droplet droplet4 js-drop">
                                            <img src="assets/images/icons/droplet.svg">
                                        </a>
                                    </div>
                                </div>
                                <img src="assets/images/bottle1.png" alt="" class="bottle-one-bottle">
                            </div>
                        </div>


    .bottle-one {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30%;
}

.bottle-one-image {
    height: 100%;
    position: relative;
    width: 251px;
}
.message {
  left: -340px;
  top: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-transform: uppercase;
  font-size: .7rem;
  color: #004197;
  height: 30px;
  width: 400px;
  margin-bottom: 1rem;
}
.message-hidden {
  display: flex;
}

.message-hidden div:nth-of-type(1)  {
  text-align: right;
  font-family: 'BrandonGrotesqueWeb-Black', sans-serif;
  letter-spacing: 2px;
  border-right: 1px solid #004197;
  width: 70%;
}
.message-hidden div:nth-of-type(2)  {
  width: 30%;
  display: flex;
  overflow:hidden;
}

Answer 1

我想出这个来帮助您将元素对齐到 div 的左侧。

通过混合使用[psuedo-elements] 和floats，我认为这可以为您提供所需的效果。发布您的代码，我会很乐意为您提供另一部分的帮助。

html {
  width: 550px;
  border: none;;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
  height:200px;
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.sibling {
  border: 3px solid red;
  height:200px;
}
.sibling.root:after {
  content: 'Sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid blue;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'floated Element';
  color: red;
}
.root {
  overflow: hidden;
}

<div class="float"> 
</div>
<div class="sibling root">
 
</div>