html css将img移动到div的第一行

Question

.img_small {
  width: 50px;
  height: 50px;
}

.wrapper {
  max-width: 600px;
}

<div class="wrapper">

  <div class="reading_chat_left" align="left">
    <div class="reading_chat_img" style="min-width: 50px; display: inline-block">
      <img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
    </div>
    <div class="reading_chat_text" style="display:inline-block; width: 60%">
      <div class="reading_chat_left_name">It goes down</div>
      <div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>

    </div>
  </div>

  <div class="reading_chat_left" align="right">

    <div class="reading_chat_text" style="display:inline-block; width: 60%">
      <div class="reading_chat_left_name">It goes down</div>
      <div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>

    </div>

    <div class="reading_chat_img" style="min-width: 50px; display: inline-block">
      <img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
    </div>
  </div>

问题：

我想要这样：

换句话说，将照片移至其div的顶部。

无论窗口宽度或其他宽度如何变化，我都希望使其与顶行对齐。

也许这是一个简单或简单的问题，但需要帮助。

感谢阅读。

Answer 1

使用vertical-align：'top'将图像与顶部对齐。检查工作片段

.img_small {
  width: 50px;
  height: 50px;
}

.wrapper {
  max-width: 600px;
}

<div class="wrapper">

  <div class="reading_chat_left" align="left">
    <div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
      <img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
    </div>
    <div class="reading_chat_text" style="display:inline-block; width: 60%">
      <div class="reading_chat_left_name">It goes down</div>
      <div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>

    </div>
  </div>

  <div class="reading_chat_left" align="right">

    <div class="reading_chat_text" style="display:inline-block; width: 60%">
      <div class="reading_chat_left_name">It goes down</div>
      <div class="reading_chat_left_text" style="background-color: orange; padding: 5px">abcd blah In this tutorial I will show you how to create Facebook style chat bubbles using CSS only. CSS Code for Chat Bubbles. Here is how chat</div>

    </div>

    <div class="reading_chat_img" style="min-width: 50px; display: inline-block;vertical-align:top">
      <img class="img_small" src="https://i.ytimg.com/vi/HCjNJDNzw8Y/maxresdefault.jpg">
    </div>
  </div>

Answer 2

您应该使用这个简单的技巧。

请添加CSS，例如：

return

或在此类.reading_chat_left .reading_chat_img { width: calc(50px - 100%); float: left; } 中提供内联css

希望获得帮助。

让我知道进一步的澄清。

.reading_chat_text{float: left;}

.img_small {
width: 50px;
height: 50px;
}

.wrapper {
max-width: 600px;
}
.reading_chat_left .reading_chat_img {
width: calc(50px - 100%);
float: left;
}