信使/短信类型的样式

Question

我正在尝试编写一些基本的 HTML 来显示 SMS 或 Messenger 样式的输出。

出于某种原因，我无法在不同的行上显示条目，发送的消息显示在右侧，接收的消息显示在左侧，并且每条消息的高度和宽度都在扩展。

例如，这个版本的 HTML 是可以的，除了所有消息都出现在左边。我很欣赏“来自”div 确实需要

position: absolute

，但这会导致行重叠，正如您所期望的那样。

body {
  background-color: black;
  color: white;
}

div.container {
  display: inline-block;
  position: absolute;
  width: 100%;
  font-family: Arial;
}

div.row {
  display: inline-block;
  position: relative;
  left: 0;
  width: 100%;
  height: auto;
  padding: 3px;
}

div.from {
  display: inline-block;
  position: relative;
  right: 0;
  max-width: 300px;
  background-color: blue;
  color: white;
  border-radius: 15px;
  padding: 10px;
}

div.to {
  display: inline-block;
  position: relative;
  left: 0;
  max-width: 300px;
  background-color: white;
  color: black;
  border-radius: 15px;
  padding: 10px;
}

<div class="container">
  <div class="row">
    <div class="from">
      There once was a man from Caracus, who was larking about like a jackass!
    </div>
  </div>
  <p>
    <div class="row">
      <div class="to">
        Hey!
      </div>
    </div>
    <p>
      <div class="row">
        <div class="from">
          What's up;
        </div>
      </div>
      <p>
        <div class="row">
          <div class="to">
            The sky?? :p
          </div>
        </div>
        <p>
          <div class="row">
            <div class="from">
              Ha ha.
            </div>
          </div>
          <p>
            <div class="row">
              <div class="to">
                Not much. You?
              </div>
            </div>
            <p>
              <div class="row">
                <div class="from">
                  Yeah not much.
                </div>
              </div>
</div>

我试过使用显示和位置类型，以及不同的元素（段落标签不是从那里开始的）。

我尽量避免使用桌子。

我是否可以对样式进行更改以获得我想要的东西，或者我是否完全在这里吠叫错误的树？

Answer 1

实际上只是使用

float: right;

和

float: left;

修复它。

我以前试过这个但没有

clear: both;

这是必要的。

div.from {
    display: inline-block;
    position: relative;
    float: right;
    clear: both;
    max-width: 300px;
    background-color: blue;
    color: white;
    border-radius: 15px;
    padding: 10px;
}
div.to {
    display: inline-block;
    position: relative;
    float: left;
    clear: both;
    max-width: 300px;
    background-color: white;
    color: black;
    border-radius: 15px;
    padding: 10px;
}

Answer 2

更现代的方法是使用 flexbox。

在每一行上设置

display: flex

（

flex-direction: row

）。然后如果你想让文字在右边，应用

justify-content: flex-end

；或者，如果您想要左侧的文字，请应用

justify-content: flex-start

。

关于 flexbox 的更多信息在这里：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这种类型的布局在现代网络上更优雅地缩放，它需要支持许多不同的视口、设备等。而且，如果你看那篇文章，你可以做很多你根本不会做的调整和调整。无法使用基于

float

的老式布局。

这是你的完整例子。请注意，我替换了不正确的

<p>

标签；

<p>

用于文本段落，而不是用于强制块元素之间的空格。 （它被一个简单的

margin-bottom

所取代。）

body {
  background-color: black;
  color: white;
  font-family: Arial;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.row {
  width: 100%;
  height: auto;
  padding: 3px;
  margin-bottom: 1em;
  display: flex;
  flex-direction: row;
}

.from {
  justify-content: flex-end;
}

.to {
  justify-content: flex-start;
}

.content {
  max-width: 300px;
  border-radius: 15px;
  padding: 10px;
}

.from .content {
  background-color: blue;
  color: white;
}

.to .content {
  background-color: white;
  color: black;
}

<div class="container">
  <div class="row from">
    <div class="content">
      There once was a man from Caracus, who was larking about like a jackass!
    </div>
  </div>
  <div class="row to">
    <div class="content">
      Hey!
    </div>
  </div>
  <div class="row from">
    <div class="content">
      What's up;
    </div>
  </div>

  <div class="row to">
    <div class="content">
      The sky?? :p
    </div>
  </div>

  <div class="row from ">
    <div class="content">
      Ha ha.
    </div>
  </div>

  <div class="row to">
    <div class="content">
      Not much. You?
    </div>
  </div>

  <div class="row from">
    <div class="content">
      Yeah not much.
    </div>
  </div>
</div>