如何使用CSS纯粹复制常见的文本消息格式？

Question

从标题中可以看出，这可能是一个广泛的问题，但它实际上是基于我试图复制典型短信对话的向上流动，交错格式的3个具体问题。 / p>

如何使用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锚定在左侧）但这会导致问题：

.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

你可以清除：每条信息，它都会产生你想要的效果 我还将.message边距更改为保证金：10px 0;

更新以解决您的问题＃3。 我更改了类#messages。使用display：table-cell;和vertical-align：bottom，将执行您正在查看的内容与底部对齐。

使用动态宽度

更新 我使用display：table将#messages包含在＃messages-container中;这样你可以使用宽度：100％;

了解这项工作如何。 display：table-cell使div的行为类似于td。因为td在表中，所以必须使用div复制相同的行为。因此，使用具有display：table的容器包装该div，以使div的行为类似于表。然后你给div宽度：100％。如果你不这样做，div（td）宽度不会扩展100％。

＆＃13;

＆＃13;

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}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;