Question

我有聊天窗口，我想在照片旁边放置照片和信息。会话窗口必须是响应式的，并且消息div可以自动调整到屏幕。但我找不到任何方法可以做到这一点，因为一旦消息有几行文本，它就会下降到下一行。

如果我使用桌子，我就无法制作固定宽度的照片TD。如果我使用DIVS，我不能做自动宽度消息DIV：）

这是JSFiddle的一个例子： https://jsfiddle.net/s95tdcLw/3/

HTML：

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit
  </div>
</div>

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
  </div>
</div>

<div class="receiver">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
    eu mattis nisi turpis vel lectus.
  </div>
</div>

CSS：

.receiver {
  clear: both;
  padding-top: 1rem;
}

.receiverPhoto {
  float: left;
  width: 40px;
  height: 40px;
  background: blue;
  border-radius: 20px;
}

.receiverMessage {
  float: left;
  width: auto;
  background: rgb(230, 230, 230);
  border-radius: 10px;
  margin-left: 0.5rem;
  padding: 10px;
}

Answer 1

保留float设置，改为使用这些设置：

.receiver {
  position: relative;
}

.receiverPhoto {
  position: absolute;
  left: 0;
}

.receiverMessage {
  margin-left: 45px;
}

jsFiddle

Answer 2

您的.receiverMessage元素不应该浮动，它应为.receiverPhoto元素保留左边距空间。

.receiverMessage {
  /* should not float */
  width: auto;
  background: rgb(230, 230, 230);
  border-radius: 10px;
  margin-left: 50px; /* reserve space of .receiverPhoto width */
  padding: 10px;
}

查看分叉的小提琴：https://jsfiddle.net/092b077c/

回应你的评论如何让它适用于相反的......

我将使用包装div元素上的类来确定消息类型。在我的示例中，我介绍了一个新类.sender。现在我创建了四个选择器，用于确定photo元素是向左还是向右浮动以及message元素是左侧还是右侧填充：

新CSS：

.sender .receiverPhoto {
  float: right;
}
.sender .receiverMessage {
  margin-right: 50px;
}

.receiver .receiverPhoto {
  float: left;
}
.receiver .receiverMessage {
  margin-left: 50px;
}

<强> HTML：

<div class="sender">
  <div class="receiverPhoto"></div>
  <div class="receiverMessage">...</div>
</div>

现在.receiverPhoto和.receiverMessage样式不需要声明margin或float。

请参阅更新的小提琴：https://jsfiddle.net/092b077c/1/

固定宽度和自动宽度div在一行中

2 个答案: