javascript - 根据规范并排定位 CSS 中的两个元素

标签 javascript html css

我有一个 HTML/CSS 部署，我想在其中放置消息及其相应所有者的首字母缩写词。我能够拥有您在下一张图片中看到的内容:

Done so far

但是，不幸的是，我无法找到相应短信箭头旁边的圆圈(带有消息发件人的首字母缩写词)(红色箭头显示每个圆圈应位于的位置):

Main look of deployed HTML with arrows showing how circles should be located

您还可以在下图中看到圆圈应如何相对于每条短信垂直对齐:

This is how the CSS should produce the look

代码在下面，也在 this fiddle snippet中如果你想直接尝试。

body {
  margin: 0;
  background: white;
  width: 110mm;
  height: 170mm;
  height: 169.8mm;
}

div {
  display: block;
}

.container {
  position: relative;
}

.third {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  display: block;
  position: relative;
}

.third .date {
  text-align: right;
  color: #394759;
  font-size: 14px;
  font-family: 'Open_Sans_Regular';
  font-style: italic;
  padding-right: 3%;
  padding-top: 2%;
  padding-bottom: 2%;
  page-break-after: avoid !important;
  padding-right: 9%;
  padding-top: 5%;
  padding-bottom: 0;
}

.third .message_wrapper {
  page-break-inside: avoid !important;
  clear: both;
  padding: 0 20px;
}

.third .space {
  display: block;
  clear: both;
  width: 100%;
  height: 5mm;
}

.third .space_bot {
  display: block;
  clear: both;
  width: 100%;
  height: 3mm;
}

.third .message_wrapper .contact {
  font-family: 'Open_Sans_Regular';
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  line-height: 25px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  float: left;
  margin-left: 6%;
  color: #a7a9ac;
  border: 4px solid #a7a9ac;
  background: #ededed;
}

.third .message_wrapper.sender .contact {
  float: right;
  margin-left: 0;
  margin-right: 6%;
  color: white;
  border: 3px solid #394759;
  background: #394759;
}

.third .message_wrapper .images {
  padding: 2%;
}

.third .message_wrapper .content_wrapper {
  max-width: 50%;
  font-size: 15px;
  font-family: 'Open_Sans_Regular';
  border-radius: 10px;
  position: relative;
  padding-bottom: 6%;
  min-width: 3%;
  margin-left: 2%;
  float: left;
  padding: 2% 2% 2% 4%;
  color: white;
  border: 4px solid #a7a9ac;
  background-color: #a7a9ac;
}


/*Right bubbles - inner*/

.third .message_wrapper.sender .content_wrapper {
  margin-left: 0;
  margin-right: 2%;
  float: right;
  text-align: right;
  border-bottom-right-radius: 7px;
  color: #394759;
  border-color: #394759;
  background-color: #ebecee;
}

.third .message_wrapper.receiver .content_wrapper {
  border-bottom-left-radius: 7px;
  border-color: #a7a9ac;
  background-color: #ededed;
  color: #a7a9ac;
}

.third .message_wrapper .content_wrapper .content {
  word-wrap: break-word;
}

.third .message_wrapper .content_wrapper .corner {
  position: absolute;
  display: block;
  left: -22px;
  bottom: -7px;
  width: 32px;
}

.third .message_wrapper .content_wrapper .image {
  display: block;
  max-width: 100%;
}

.third .message_wrapper.sender .content_wrapper .corner {
  left: initial;
  right: -24px;
  bottom: -6px;
  height: 12px;
  width: 33px;
}

.third .message_wrapper.receiver .content_wrapper .corner {
  right: initial;
  left: -23px;
  bottom: -7px;
}

.msg_group {
  margin-top: 5%;
  padding-bottom: 5px;
}
<html>

<body>
  <div class="container third">
    <div class="msg_group">
      <div class="message_wrapper sender">
        <div class="date"><span class="date_light">10 déc. 2015 16H45</span></div>
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content"></div>
          <div class="images">
            <img class="image" src="https://preview.ibb.co/b7DZ4x/IMG_20151210_WA0002.jpg">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper sender">
        <div class="date"><span class="date_light">10 déc. 2015 16H46</span></div>
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">Lo entiendes?</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper receiver">
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">Si en la siguiente rotonda</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">En amarillo está la Avda. Juan Carlos I</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper receiver">
        <div class="date"><span class="date_light">10 déc. 2015 16H47</span></div>
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">a sdf adf as dfasdfasdfa df as df asd fa df asd f asd fasdfasdf asd fa sdf a sdf asdfasd f asdf a sdf</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">asdfadf asdfasdf fas dfas df asd fa sdf asd f asdf as df asd fa sdf asd f asd fasdfasdfasdf asd fa sdf as df asdf asdf asd fadfasdfasd f asdf a sdf asd fa sdfasdfa dsf as df asdfa sdf ad f asdfadfasdf a sdf asd fa sdf asdfadf a sdf asd f asd
            f asdfasdfa sdf as df asd f asdfasdf asd f asd f asdf</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
      <div class="message_wrapper sender">
        <div class="space"></div>
        <div class="contact">J</div>
        <div class="content_wrapper">
          <div class="content">10 minutos andando</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="msg_group">
      <div class="message_wrapper receiver">
        <div class="date"><span class="date_light">10 déc. 2015 16H48</span></div>
        <div class="space"></div>
        <div class="contact">60</div>
        <div class="content_wrapper">
          <div class="content">Yo te llamo cuando este valeee??</div>
          <div class="images">
          </div>
          <img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
        </div>
        <div class="space_bot"></div>
        <div style="clear:both;"></div>
      </div>
    </div>
  </div>
</body>

</html>

你能帮帮我吗？谢谢。

最佳答案

您可以为 .message_wrapper 添加相对位置，然后为 .contact 添加绝对位置。

.third .message_wrapper {
   position: relative;
}

.third .message_wrapper .contact {
  position: absolute;  bottom: 0;
}

.third .message_wrapper.sender .contact {
  right: 0;
}

.third .message_wrapper.sender .content_wrapper {
  margin-right: 12%;
}

.third .message_wrapper.receiver .contact {
  left: 0;
}

.third .message_wrapper.receiver .content_wrapper {
  margin-left: 12%;
}

这是您的 Fiddle 的更新

关于javascript - 根据规范并排定位 CSS 中的两个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49642520/

上一篇：html - 用于表示 AND 条件的 CSS 组合器

下一篇：javascript - 如何制作用于切换文本的切换？

相关文章：

javascript - 如何让我的菜单逻辑更简洁？

css - 如何使导航悬停为背景

jquery - 用jquery提交表单不起作用

html - 如何将图像对齐到 div 的底部？

javascript - .children() 不适用于 jquery 返回的指定索引

javascript - 通过 dbuezas 在 D3 Pie 中添加外部数据

javascript - React-Bootstrap 组件文档

html - 我怎样才能把一个div的一部分插入到外面的div中？

html - 如何居中 div 并放置在另一个 div 的底部

javascript - 在 HTML/CSS/Native JavaScript 中显示一个根据选项卡更改其内容的四选项卡表格的优雅方式是什么？

©2024 IT工具网  联系我们