我正在尝试创建一个用于发送/接收 SMS 的页面，我想显示每条 SMS 的发送/接收时间，但我似乎无法正确对齐日期...
这是我的 jsfiddle:https://jsfiddle.net/xazvruqj/2/
编辑:我的 jsfiddle 缺少实际的 CSS ...
我的 CSS 中的这部分给我带来了麻烦:
.dateR{
position: absolute;
width: 400px;
float: left;
top: 100%;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL{
position: absolute;
width: 200px;
left: 2px;
top: 100%;
text-align: left;
font-size: 75%;
font-style: italic;
}
如您所见，右侧的日期完全错误，我希望它们在消息的右侧和下方文本对齐。
我认为使用 position:absolute 作为日期会更容易，但它只适用于左侧。
感谢阅读本文。
最佳答案
可能还有其他解决方案 - 但如果您将日期放在它们自己的容器中并分别对齐它们就足够简单了。
这是一个使用新的 CSS 类“bubble-line”的解决方案:
/* Bit of normalisation */
body {
background-color: #eee;
color: #222;
font: 0.8125em/1.5'Helvetica Neue', Helvetica, Arial, sans-serif;
width: 400px;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.container {
padding: 10px 10px;
margin: 0 auto;
width: 400px;
}
/* .bubble */
.bubble-line {
width: 100%;
position: relative;
}
.bubble-line-right {
width: 100%;
float: right;
}
.bubble {
background-image: linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -o-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -moz-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -ms-linear-gradient(bottom, rgb(210, 244, 254) 25%, rgb(149, 194, 253) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(210, 244, 254)), color-stop(1, rgb(149, 194, 253)));
border: solid 1px rgba(0, 0, 0, 0.5);
/* vendor rules */
border-radius: 20px;
/* vendor rules */
box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
/* vendor rules */
box-sizing: border-box;
clear: both;
margin-bottom: 5px;
padding: 8px 30px;
position: relative;
display: inline-block;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
width: auto;
max-width: 100%;
word-wrap: break-word;
}
.bubble:before,
.bubble:after {
border-radius: 20px / 10px;
content: '';
display: block;
position: absolute;
}
.bubble:before {
border: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: -7px;
z-index: -2;
}
.bubble:after {
border: 8px solid transparent;
border-bottom-color: #d2f4fe;
bottom: 1px;
left: -5px;
}
.bubble--alt {
background-image: linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -o-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -moz-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -ms-linear-gradient(bottom, rgb(172, 228, 75) 25%, rgb(122, 205, 71) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.25, rgb(172, 228, 75)), color-stop(1, rgb(122, 205, 71)));
float: right;
display: inline-block;
}
.bubble--alt:before {
border-bottom-color: rgba(0, 0, 0, 0.5);
border-radius: 20px / 10px;
left: auto;
right: -7px;
}
.bubble--alt:after {
border-bottom-color: #ace44b;
border-radius: 20px / 10px;
left: auto;
right: -5px;
}
.dateR {
display: inline-block;
float: right;
text-align: right;
font-size: 75%;
font-style: italic;
}
.dateL {
text-align: left;
font-size: 75%;
font-style: italic;
}<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>
<body>
<div class="container">
<div class="bubble-line">
<div class="bubble ">Test</div>
</div>
<div class="bubble-line">
<div class="dateL">11 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">Test</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble bubble--alt">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line-right">
<div class="dateR">12 mai 2015 12:02:02</div>
</div>
<div class="bubble-line">
<div class="bubble ">TestTestTestTestTest TestTest Test Test TestTestTestTestTestTestTest</div>
</div>
<div class="bubble-line">
<div class="dateL">12 mai 2015 12:02:02</div>
</div>
</div>
</body>这样，您就不会遇到 float 堆叠在同一行上的问题，也不会破坏文本气泡上的背景图像位置。
关于html - 带有 iPhone 聊天布局的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30378168/