html - 普通的短信格式怎么能完全用CSS复制出来呢？

Question

从标题来看，人们会认为这可能是一个宽泛的问题，但它实际上是基于我在尝试复制典型 SMS 对话的向上流动、交错格式时遇到的 3 个具体问题。

普通的短信格式怎么能纯CSS复制？

考虑以下代码:

<div id="messages" class="bordered shadowed">
    <div class="message from">Hey</div>
    <div class="message to">Sup</div>
    <div class="message from">How are ya?</div>
</div>

1. 我可以通过应用 .to 错开消息(.from 锚定在右侧，float:left/right 锚定在左侧)但这会导致一个问题:

第二次a .to附加到 #messages , 除非它是一条长消息，否则它将被放置在前一条消息的旁边，而不是下面，因为这就是 float 的方式。有效。

2.好吧，我试图通过将每个 .message进入.messageWrapper并申请 width:100%到包装器，但这会导致另一个问题:

.message s (其中有 float:left/right )不要填写 .messageWrapper ，正确地，从那里开始有点困惑。

3. 最后，我不知道如何应用解决方案来解决这些问题，同时让我将元素按应有的方式锚定到容器底部是，以便它们向上流动。

---

示例:

我有一个非常漂亮的示例，这意味着有大量的 css，所以我缩小到一行，避免了这里的大代码块。如果您想查看/编辑它，只需点击“编辑上面的片段”并点击 tidy。

div,input{box-sizing:border-box}:focus{outline-color:transparent;outline-style:none}::selection{background:#00a9ff}body{padding:0;margin:0;background-color:#0090d8}.float{float:left}.bordered{border-style:solid;border-width:1px}.shadowed{box-shadow:rgba(0,0,0,.1) 0 0 30px -10px inset,rgba(0,0,0,.5) 0 0 8px -5px inset}#messenger{width:50vw;height:100vh;background-color:#dbdbdb;font-family:Arial;border-width:0 10px;border-color:#26c8ff;margin-left:50px;box-shadow:rgba(38,200,255,.8) 0 0 300px -50px,rgba(38,200,255,.8) 0 0 10px -2px}#messages{color:#dbdbdb;width:100%;height:50%;background-color:#fff;padding:10px}#guesses{width:100%;height:40px}.guess{color:#efefef;font-size:24px;width:33.3333333%;height:100%;box-shadow:rgba(255,255,255,.2) 0 0 50px 10px inset;text-align:center;padding-top:5px;transition:box-shadow .3s,color .2s}.guess:hover{box-shadow:rgba(255,255,255,1) 0 0 120px -20px inset;color:#fff;cursor:pointer}#input{width:80%;height:30px;text-align:center;cursor:pointer;font-size:17px}#send{border-color:#212121;color:#fff;width:20%;background-color:#3f3f3f;height:30px;text-align:center;padding-top:5px;font-size:17px;box-shadow:rgba(255,255,255,.2) 0 0 50px 10px inset;transition:box-shadow .3s,color .2s}#send:hover{box-shadow:rgba(0,0,0,.3) 0 0 20px 0 inset;color:#fff;cursor:pointer}.message{padding:5px 10px;border-radius:100px;margin-top:50px;color:#fff}.to{float:right;background-color:#26c8ff;border-color:#00a2d8}.from{float:left;background-color:#0090d8;border-color:#005f8e}

<div id="messenger" class="bordered">
    <div id="messages" class="bordered shadowed">
        <div class="message from bordered">Hey</div>
        <div class="message to bordered">Sup</div>
        <div class="message from bordered">How are ya?</div>
    </div>
    <input type="text" id="input" class="float" placeholder="Message"></input>
    <div id="send" class="bordered float">Send</div>
    <div id="guesses">
        <div class="guess bordered float" id="guess-1">A</div>
        <div class="guess bordered float" id="guess-2">No</div>
        <div class="guess bordered float" id="guess-3">Bet</div>
    </div>
</div>

现场演示:http://jsfiddle.net/fr6ur53s/

Answer 1

你可以clear:both每条消息，它会做你想要的效果。
我还将 .message 边距更改为 margin:10px 0;

更新: 解决您的问题 #3。我改变了类#messages。使用显示:表格单元格；和 vertical-align: bottom，将按照您的要求将内容对齐到底部。

更新:使用动态宽度我使用 display:table; 用 #messages-container 包装了#messages；这样你就可以使用 width: 100%;

了解这是如何工作的。 display:table-cell 使 div 的行为类似于 td。因为 td 在表内，所以您必须使用 div 复制相同的行为。因此，用一个包含 display:table 的容器包装该 div，使该 div 的行为像一个表。然后你给div width: 100%。如果不这样做，div (td) 宽度不会扩展 100%。

div,input{box-sizing:border-box}:focus{outline-color:transparent;outline-style:none}::selection{background:#00a9ff}body{padding:0;margin:0;background-color:#0090d8}.float{float:left}.bordered{border-style:solid;border-width:1px}.shadowed{box-shadow:rgba(0,0,0,.1) 0 0 30px -10px inset,rgba(0,0,0,.5) 0 0 8px -5px inset}#messenger{width:50vw;height:100vh;background-color:#dbdbdb;font-family:Arial;border-width:0 10px;border-color:#26c8ff;margin-left:50px;box-shadow:rgba(38,200,255,.8) 0 0 300px -50px,rgba(38,200,255,.8) 0 0 10px -2px}

#messages-container {
  display:table;
    width:100%;
}

#messages{
color:#dbdbdb;

width:100%;
height:50%;
background-color:#fff;
padding:10px;

 display: table-cell;
vertical-align: bottom;
}

#guesses{width:100%;height:40px}.guess{color:#efefef;font-size:24px;width:33.3333333%;height:100%;box-shadow:rgba(255,255,255,.2) 0 0 50px 10px inset;text-align:center;padding-top:5px;transition:box-shadow .3s,color .2s}.guess:hover{box-shadow:rgba(255,255,255,1) 0 0 120px -20px inset;color:#fff;cursor:pointer}#input{width:80%;height:30px;text-align:center;cursor:pointer;font-size:17px}#send{border-color:#212121;color:#fff;width:20%;background-color:#3f3f3f;height:30px;text-align:center;padding-top:5px;font-size:17px;box-shadow:rgba(255,255,255,.2) 0 0 50px 10px inset;transition:box-shadow .3s,color .2s}#send:hover{box-shadow:rgba(0,0,0,.3) 0 0 20px 0 inset;color:#fff;cursor:pointer}

.message{
color:#fff;
padding:5px 10px;
border-radius:100px;
margin:10px 0;
clear: both;
}

.to{float:right;background-color:#26c8ff;border-color:#00a2d8}

.from{float:left;background-color:#0090d8;border-color:#005f8e}

<div id="messenger" class="bordered">
  <div id="messages-container">
    <div id="messages" class="bordered shadowed">
        <div class="message from bordered">Hey</div>
          
        <div class="message to bordered">Sup</div>
          
        <div class="message from bordered">How are ya?</div>
    </div>
 </div>
  
    <input type="text" id="input" class="float" placeholder="Message"></input>
    <div id="send" class="bordered float">Send</div>
    <div id="guesses">
        <div class="guess bordered float" id="guess-1">A</div>
        <div class="guess bordered float" id="guess-2">No</div>
        <div class="guess bordered float" id="guess-3">Bet</div>
    </div>
</div>