Html 从右侧图像下方移动文本

如何将文本而不是图像下方放置到图像右侧的文本

<div class="panel-body">                            
    <img class="img-thumbnail image-text" style="float:left; width:180px;" alt="" src="images/bussniss-pic.jpg">
    <p>
    </p>
</div>

这会使段落中的所有文本在图像的宽度上起伏。否则，段落就是在做它应该做的事情，即围绕图像流动

图像本身实际上与段落重叠，从而将文本推到上方。如果您希望文本的左边缘对齐，则必须添加足够的空白以说明图像

示例：

请参见以下JSFIDLE：

HTML

只使用填充是可行的，但如果您忘记在两个位置保持图像和段落的大小相同，这将是错误的。此外，如果图像可以有多种尺寸，它也不能很好地适应

---

无论图像大小如何，此示例都有效。将文本包装在一个div中，使它们保持对齐。

将段落标记p包装在一个div中，并将该div向左浮动。这样，你的图像大小就无关紧要了

<div class="panel-body">                            
    <img class="img-thumbnail image-text" style="float:left; width:180px;" alt="" src="images/bussniss-pic.jpg" />
    <div style="float:left;">
        <p>adsf         dsa          fdsa    <br/>     fdsa         fdsa         f        dsaf        asdfadsfdsafdsafdsaf a khndsa jghsa<br/> ufghdsag kusahg usahg uashgoufdsa hgoiusadhgpiusfd hgiudsahgiufdsa<br/> hgiufdsa hgiu hfdspiuga<br/> fdhgiu hfdagpiuafd hgpiufda hgpiufdahg <br/>iufdahg <br/>iufda hg hgjoiafdsjgoiafdsgiufda<br/> giufdah g iufdagoifda <br/>gfda g[odahgf<br/>daiugapkjfhg;akjfdhg ;ajdhg a;jdfhg ;ajhg a;jhg; a;aljsd hg;ajgh<br/> ;agj hafdlkjgh lkjfdahgal<br/> lhfda g
        </p>
    </div>
</div>

---

请参见此处的示例

在img下面包装的内容是什么元素？你在用CSS吗？@BillF。对不起，我已经用cssI更新了我的问题，更新了您的JSFIDLE以包含占位符图像，但您的解决方案似乎不起作用。可能需要处理它确实有效，但如果页面上没有足够的空间容纳所有内容，文本将移动到图像下方。更新了小提琴，减少了文字。您可能还希望包含.panel body；像这样浮动两个子元素意味着它将塌陷为零高度，这可能会或可能不会导致后续元素的布局问题。一个简单的溢出：自动修复。为True，添加了一个明确的：两者之后。没有考虑到在下面发生了什么

.panel-body p
{
    padding-left: 180px;
}

<div class="panel-body">                            
    <img class="img-thumbnail image-text" style="width:200px;" alt="" src="images/bussniss-  pic.jpg">
    <div style="display: inline-block">
    <p>
        Text
    </p>
    </div>
</div>

.img-thumbnail {
float: left;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

<div class="panel-body">                            
    <img class="img-thumbnail image-text" style="float:left; width:180px;" alt="" src="images/bussniss-pic.jpg" />
    <div style="float:left;">
        <p>adsf         dsa          fdsa    <br/>     fdsa         fdsa         f        dsaf        asdfadsfdsafdsafdsaf a khndsa jghsa<br/> ufghdsag kusahg usahg uashgoufdsa hgoiusadhgpiusfd hgiudsahgiufdsa<br/> hgiufdsa hgiu hfdspiuga<br/> fdhgiu hfdagpiuafd hgpiufda hgpiufdahg <br/>iufdahg <br/>iufda hg hgjoiafdsjgoiafdsgiufda<br/> giufdah g iufdagoifda <br/>gfda g[odahgf<br/>daiugapkjfhg;akjfdhg ;ajdhg a;jdfhg ;ajhg a;jhg; a;aljsd hg;ajgh<br/> ;agj hafdlkjgh lkjfdahgal<br/> lhfda g
        </p>
    </div>
</div>