html - 将行内 block 文本保留在图像旁边

Question

我试图在固定宽度的容器 div 中的图像旁边放置一些文本。为此，我在文本上使用了 display: inline-block。这在文本很短但比 div 长时有效，如以下代码片段所示:

.container {
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
}

img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 1px solid black;
    vertical-align: middle;
    
}

.text-container {
   margin-left: 10px;
   display: inline-block;
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/>
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/>
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

我想实现的是这样的:

因此文本仍然在图像的中间和旁边垂直对齐。

有什么办法可以实现吗？

Answer 1

img 是一个内联元素，.text-container 是一个内联 block 。当行内元素放不下当前行时，换行，元素移到下一行。

为了防止那个集合white-space: nowrap在 .container 上。要在 .text-container 中启用换行，请定义它的宽度，并将空白行为恢复为正常(换行)。

.container {
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
  white-space: nowrap; /** force the elements to stay side by side **/
}

img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid black;
  vertical-align: middle
}

.text-container {
  display: inline-block;
  width: calc(100% - 60px); /** containers width - img width - margin-left **/
  margin-left: 10px;
  white-space: normal;
  vertical-align: middle
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

但是，您可以通过使用带有 align-items: center 的 flexbox 来进一步简化结构:

.container {
  display: flex; /** set the container as flexbox **/
  align-items: center; /** align all items vertically **/
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid red;
}

img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid black;
}

.text-container {
  margin-left: 10px;
}

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT</div>
</div>

<div class="container">
  <img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png" />
  <div class="text-container">I AM TEXT OH NOOO</div>
</div>

并且通过使用 flexbox，您还可以将带有边框的图像移动到 .container 的背景中以获得单个 div 解决方案。

.container {
  display: flex; /** set the container as flexbox **/
  align-items: center; /** align all items vertically **/
  box-sizing: border-box; /** the padding and the border are part of the width **/
  width: 202px;
  min-height: 54px;
  margin-bottom: 10px;
  padding-left: 60px; /** save space for the image and the margin between the image and the text **/
  border: 1px solid red;
  /** set the image and the image border as backgrounds **/
  background: radial-gradient(circle at center, transparent 0, transparent 24px, black 24px, transparent 26px), url(http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png);
  /** set the backgrounds size **/
  background-size: 51px 51px, 50px 50px;
  background-repeat: no-repeat; /** prevent the backgrounds from repeating themselves to fill the container **/
  background-position: left center; /** position them in relation to the container **/
}

<div class="container">
  I AM TEXT
</div>

<div class="container">
  I AM TEXT OH NOO
</div>