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

时间：2018-04-04 03:58:12

标签： 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 中。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

你能帮帮我吗？谢谢。

2 个答案:

答案 0 :(得分：3)

您可以将相对位置添加到import streamlink import subprocess import requests if __name__ == "__main__": streams = streamlink.streams("http://twitch.tv/twitchplayspokemon") stream = streams["worst"] fd = stream.open() url = fd.writer.stream.url fd.close() res = requests.get(url) tsFiles = list(filter(lambda line: line.startswith('http'), res.text.splitlines())) print(tsFiles) for i, ts in enumerate(tsFiles): vid = 'vid{}.ts'.format(i) process = subprocess.run(['curl', ts, '-o', vid]) process = subprocess.run(['ffmpeg', '-i', vid, '-vf', 'fps=1', 'out{}_%d.png'.format(i)]) ，然后添加import React, { Component } from 'react'; import {Switch, Route, Link} from 'react-router-dom'; import WYSIWYG from './editor/wysiwyg'; const Dashboard = () => ( <ul id="DASHBOARD-MENU"> <li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li> </ul> ); export default class Dashboard extends Component{ render(){ return( <div className="wrapper"> <Switch> <Route exact path="/" component={Dashboard} /> <Route exact path="/wysiwyg" component={WYSIWYG}/> </Switch> </div> ); } } 的绝对位置。

.message_wrapper

此处更新Fiddle

答案 1 :(得分：1)

您可以使用flexbox解决此问题！

TL; DR以下解决方案产生：

right-aligned chat

为了得到它，我们将使用这种方法： https://stackoverflow.com/a/27812717/3029173

对于“正确”对齐的消息，您可以使用外部弹性框右对齐div，然后使用内部弹性框将初始值移动到底部：

<html>
<body>
<div class="chat-block">
  <div class="chat">
    <div class="picture"></div>
    <div class="initial-container">
      <div class="initial"></div>
     </div>
  </div>
</div>
</body>
</html>

和css：

.chat-block {
  background-color:teal;
  width:100%;
  height: 200px;
}

.chat {
  display: flex;
  justify-content: flex-end;
}

.picture {
  background-color: red;
  width: 40px;
  height: 80px;
  order: 1
}

.initial-container {
  display: flex;
  flex-direction: column;
  order: 2
}

.initial {
  background-color: yellow;
  width: 20px;
  height: 20px;
  margin-top: auto;
}

可以解决这个问题：

要在左侧进行聊天，您只需添加以下css：

.chat {
  justify-content: flex-start;
}

.picture {
  order: 3
}

更改这两个CSS属性会为您提供：

left-aligned chat

正如您所看到的，这是一种非常可扩展的方法，不需要太多的CSS来实现。

document.getElementById('switch').addEventListener('click', () => {
  const block = document.getElementsByClassName('chat-block')[0];
  if (block.className === 'chat-block') {
    block.className = 'chat-block left';
  } else {
    block.className = 'chat-block';
  }
});
.chat-block {
  background-color:teal;
  width:100%;
  height: 200px;
}

.chat {
  display: flex;
  justify-content: flex-end;
}

.picture {
  background-color: red;
  width: 40px;
  height: 80px;
  order: 1
}

.initial-container {
  display: flex;
  flex-direction: column;
  order: 2
}

.initial {
  background-color: yellow;
  width: 20px;
  height: 20px;
  margin-top: auto;
}

.left .chat {
  justify-content: flex-start;
}

.left .picture {
  order: 3;
}


#switch {
margin-bottom: 20px;
}
<html>
<body>
<button id="switch">Toggle alignment</button>
<div class="chat-block">
  <div class="chat">
    <div class="picture"></div>
    <div class="initial-container">
      <div class="initial"></div>
     </div>
  </div>
</div>
</body>
</html>

相关问题
最新问题