在图像旁边保留内嵌块文本

Question

我试图在固定宽度的容器div内的图像旁放置一些文本。为此，我在文本上使用display: inline-block。这工作时，文字很短，但是当它变得比格不再只是向下移动所看到的这个片段：

.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是嵌入式块。当内联元素无法放入当前行时，行会中断，并且元素将移至下一行。

为了防止在.container上设置white-space: nowrap。要启用.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>

但是，你甚至可以进一步利用Flexbox，就与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>

，并通过使用Flexbox的，你也可以将带有边框的图像移动到的背景获得单个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>

Answer 2

你会得到这个，因为div自动把自己放在换行符上。如果在文本周围使用<span>标签，它应该与图像显示在同一行上。

尝试更换：

<div class="text-container">I AM TEXT OH NOOO</div> 

有：

<span class="text-container">I AM TEXT OH NOOO</span> 

希望帮助！

Answer 3

一种解决方案是浮动图像，并在text-container上使用display: block。如果文字变得足够大，文本会在文字下方显示。我还将margin样式移动到图像上，您可以进一步调整间距。

.container { 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
} 
 

 
img { 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid black; 
 
    vertical-align: middle; 
 
    float: left; 
 
    margin-right: 10px; 
 
} 
 

 
.text-container { 
 
    display: 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 OH NOOO</div> 
 
</div>

既然一切是固定的大小，你也可以让事情作为inline-block，但你的文字容器上使用固定width。