在图像旁边保留行内块文本 [英] Keep inline-block text next to image

问题描述

我正在尝试在固定宽度的容器 div 内的图像旁边放置一些文本.为此，我在文本上使用 display: inline-block .这适用于文本很短但当它比 div 长时它只是向下移动，如以下代码段所示:

.container {宽度:200px；底边距:10px；边框:1px纯红色；}图像{高度:50px；宽度:50px；边界半径:50%；边框:1px纯黑色；垂直对齐:中间；}.文本容器{左边距:10px；显示:内联块；}

<img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/><div class="text-container">我是文本</div>
<div class="容器"><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>

我想要实现的是这样的:

所以文本仍然在图像的中间和旁边垂直对齐.

有什么办法可以实现吗?

解决方案

img 是内联元素，.text-container 是内联块.当行内元素无法放入当前行时，换行，并将元素移至下一行.

为了防止该设置 white-space: nowrap<.container 上的/code>.要在 .text-container 中启用换行，请定义它的宽度，并将空白行为恢复为正常(换行).

.container {宽度:200px；底边距:10px；边框:1px纯红色；空白:nowrap；/** 强制元素并排放置 **/}图像{高度:50px；宽度:50px；边界半径:50%；边框:1px纯黑色；垂直对齐:中间}.文本容器{显示:内联块；宽度:计算(100% - 60px)；/** 容器宽度 - img 宽度 - margin-left **/左边距:10px；空白:正常；垂直对齐:中间}

<img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/><div class="text-container">我是文本</div>
<div class="容器"><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>

但是，您可以通过使用带有 align-items: center:

的 flexbox 来进一步简化结构

.container {显示:弹性；/** 将容器设置为 flexbox **/对齐项目:居中；/** 垂直对齐所有项目 **/宽度:200px；底边距:10px；边框:1px纯红色；}图像{高度:50px；宽度:50px；边界半径:50%；边框:1px纯黑色；}.文本容器{左边距:10px；}

<img src="http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAgtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-smiley.png"/><div class="text-container">我是文本</div>
<div class="容器"><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>

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

.container {显示:弹性；/** 将容器设置为 flexbox **/对齐项目:居中；/** 垂直对齐所有项目 **/box-sizing: 边框框；/** 内边距和边框是宽度的一部分 **/宽度:202px；最小高度:54px；底边距:10px；padding-left: 60px;/** 为图片节省空间以及图片和文字之间的边距 **/边框:1px纯红色；/** 设置图片和图片边框为背景 **/背景:径向渐变(中心圆形，透明 0，透明 24px，黑色 24px，透明 26px)，url(http://4.bp.blogspot.com/-e98D9RG3Gzs/U5XAGtaj9tI/AAAAAAAAIIo/hDPgyrWvxy0/s1600/shy-笑脸.png);/** 设置背景大小 **/背景尺寸:51px 51px，50px 50px；背景重复:不重复；/** 防止背景重复填充容器**/背景位置:左居中；/** 将它们相对于容器定位 **/}

我是文字
<div class="容器">我是文字哦不

I'm trying to place some text next to an image inside a container div of fixed width. To do this I'm using display: inline-block on the text. This works when the text is short but when it gets longer than the div it just moves downwards as seen in this snippet:

.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>

What I'd like to achieve is something like this:

So the text is still vertically aligned in the middle and next to the image.

Is there any way to achieve this?

解决方案

The img is an inline element, and the .text-container is an inline block. When the an inline element can't fit in the current line, the line breaks, and the element is moved to the next line.

To Prevent that set white-space: nowrap on the .container. To enable the wrap inside the .text-container, define it's width, and return the white space behavior to normal (wrap).

.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>

However, you can simplify the structure even further by using a flexbox with align-items: center:

.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>

And by using flexbox, you can also move the image with it's border to the background of .container to get a single div solution.

.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>

这篇关于在图像旁边保留行内块文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！