CSS与iPhone聊天布局

Question

我想创建一个页面将用于发送/接收短信，我想显示每个短信发送/接收时，但我似乎无法似乎能够对齐日期正确的...

这里是我的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; 
} 

正如你所看到的，右边的日期完全错误，我希望它们按照正确的文本对齐并在消息之下。

我认为使用位置：绝对的日期会使它更容易，但只有左侧是正确的。

感谢您阅读本文。

Answer 1

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

下面是一个使用新的CSS类“泡沫线”的解决方案：

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

这样的话，你不要用浮漂在同一行上堆放遇到问题，并且不要破坏文字泡泡上的背景图像位置。

Answer 2

嗨，不知道这是否会有所帮助。

在您的.dateR上使用

position：absolute; left：0; （或任何你想要的话）

无需浮动：左绝对定位

此外，还要确保父元素设置为位置：相对;