CSS：配置文件图片对齐

Question

我在聊天中调整个人资料图片时遇到问题。个人资料图片应始终位于用户名旁边，如下图所示。

我该如何解决这个问题？我一直在努力解决这个问题，我知道有些聪明的人可以立刻解决这个问题。

我不是最好的CSS。代码如下：

jsfiddle.net/cefes3au/2/

Answer 1

解决方案：align-items: center;应为align-items: flex-start：

<强> REF：

  

align-items属性是Flexible Box Layout模块的子属性。

     

     

参考：https://css-tricks.com/almanac/properties/a/align-items/

<div id="chat" class="row chat" style="height: 50%; margin-bottom: 0px; overflow-y: scroll; overflow-x: hidden;">
     
     <!--IGNORE: CORRECT MESSAGES -->
     
      <div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
        <div class="chat-profile" style="display: inline;">
          <img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
        </div>
        <div class="chat-message" style="display: inline; color: #CDCDC8;">
          <span>Fürher CSGOArena.com</span>
          <p style="margin: 0; color: grey;">This is my first message.</p>
        </div>
      </div>
      <div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
        <div class="chat-profile" style="display: inline;">
          <img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
        </div>
        <div class="chat-message" style="display: inline; color: #CDCDC8;">
          <span>Fürher CSGOArena.com</span>
          <p style="margin: 0; color: grey;">This is my second message.</p>
        </div>
      </div>
      
 <!-- END HERE -->
 
 
 
 
 <!--PROBLEM STARTS HERE-->
      
      <div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
        <div class="chat-profile" style="display: inline;">
          <img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;'         src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
        </div>
        <div class="chat-message" style="display: inline; color: #CDCDC8;">
          <span>Fürher CSGOArena.com</span>
          <p style="margin: 0; color: grey; max-width: 225px; word-wrap: break-word;">READ: The profile picture to the left should be right beside the username at the top and not vertically centered to the div. It should look like the other messages above.</p>
        </div>
      </div>
<!--PROBLEM END HERE-->


    </div>

Answer 2

你的CSS as-is并不能告诉图像到达顶部。根据您的需要，您可以使用绝对和相对定位。一种简单的方法是添加以下CSS：

.chat-content {
  position: relative;
}
.responsive-img {
  position: absolute;
  top: 2px;
}
.chat-message {
  margin-left: 40px;
}

Answer 3

在div class="col s12 chat-content"元素中，你有align-items: center，虽然这是你需要一个弹性盒的大多数东西的绝佳默认值，但它在锡罐上做了它所说的：它对齐了所有内容flexbox在交叉轴上居中，而你希望事物与 top 对齐。

有三种方法可以解决这个问题：

• 将align-items切换为stretch：如果您需要在元素中进一步修饰或背景以便正确对齐，这将占据整个高度

• 将align-items切换为flex-start：这可以通过将个人资料图片与顶部对齐来解决您的问题，正如您所要求的那样，它不会占用全部高度

  < / LI>

• 完全删除align-items，因为它默认为flex-start。我认为干净的代码通常比较好，我认为。

这是灵活方框的绝佳资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/