Question

我正在尝试创建一个用于发送/接收短信的页面，我希望在发送/接收每条短信时显示，但我似乎无法正确对齐日期... < / p>

这是我的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：绝对日期会让它更容易，但只有左侧才是真的。

感谢您阅读本文。

Answer 1

可能还有其他解决方案 - 但如果您只是将日期放在自己的容器中并将它们分开对齐，那就很容易了。

以下是使用新CSS类＆＃34; bubble-line＆＃34;的解决方案：

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

这样，你就不会遇到浮在同一条线上的浮动问题，也不会破坏文本气泡上的背景图像位置。

Answer 2

嗨，不确定这是否有帮助。

在你的.dateR上使用

的位置是：绝对的; 左：0; （或者你想要的任何地方）

不需要浮动：留下绝对定位

此外，请确保将父元素设置为position：relative;

带有iPhone聊天布局的CSS

2 个答案: