根据规范并排定位CSS中的两个元素
[英]Locating two elements in CSS side-by-side according to specifications
问题描述
我有一个HTML / CSS部署，我想放置消息和相应所有者的首字母缩略词。 我能够在下一张图片中看到你所看到的内容：
但是，遗憾的是，我无法找到相应文本消息箭头旁边的圆圈（带有消息发送者的首字母缩写词）（红色箭头表示每个圆圈应该位于的位置）：
您还可以在下一张图片中看到圆圈应如何相对于每条短信垂直对齐：
代码如下，如果你想直接尝试，也可以在这个小提琴片段中 。
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>
你能帮助我吗？ 谢谢。
2 个解决方案
解决方案1
3 已采纳 2018-04-04 04:12:59
您可以为.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%;
}
这是你的小提琴的更新
解决方案2
1 2018-04-04 04:27:31
你可以用flexbox解决这个问题！
TL; DR以下解决方案产生：
为了得到它，我们将使用这种方法： 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属性可以为您提供：
正如您所看到的，这是一种非常可扩展的方法，不需要太多的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>
JQuery Mobile：并排/下方放置元素-取决于平台
[英]JQuery Mobile: Place elements side-by-side/below - Depending on Platform
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.