Question

很抱歉，如果我使用的术语不正确，这是我的新手。我想水平并排堆叠两个div，图像和消息内容。我已经编写了一个消息传递UI。

一切正常，直到我想在邮件旁边投放用户图片。我尝试将display: inline-block;添加到两个div（图像和消息内容）中，但这没有帮助。

我不确定我还能做些什么，除非我只是使用引导网格系统，这似乎是过分的。

Answer 1

clear:both;防止元素彼此相邻浮动。您的样式规则.message-holder .message-to { clear: both; }正在影响您要内嵌显示的元素。 Here's a helpful readup I found on floats and clear: both。

Answer 2

我可以想到的一种方法是将每个值实现为一个表元素。像...

<table>
  <td>
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
  </td>
  <td>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </td>
</table>

Answer 3

只要有消息持有人类，就添加d-flex类

html,
body {
  height: 100%;
}

.messages-wrapper {
  padding: 20px 20px 0px 20px;
  height: 100vh;
}

.pull-right {
  float: right !important;
}

.message-holder .message-to {
  float: right;
  clear: both;
}

.message-content {
  max-width: 300px;
  padding: 12px 15px 12px 15px;
  border-radius: 3px;
  margin-bottom: 10px;
}

.message-image {
  clear: both;
}

.message-image img {
  width: 40px;
  border-radius: 100%;
}

.message-picture img {
  width: 20px;
  height: 20px;
}

.message-to {
  background-color: #161616;
  color: #fff;
  float: right;
}

.message-from {
  background-color: #ebebeb;
  float: left;
}

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css">
<div class="messages-wrapper">
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Can you also bring your charger when you come round?
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-from">
      It was alright, I'll tell you all about it later! No problem, I'm on my way now.
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-from">
      ffff
    </div>
  </div>
  <div class="message-holder d-flex">
    <div class="message-image pull-right">
      <img src="http://placehold.it/40x40">
    </div>
    <div class="message-content message-to">
      Hey man, how was your day after?
    </div>
  </div>
</div>

在父支架div内水平对齐两个div？

3 个答案: