Question

如何将文字而不是图像下方放置在图像右侧的文字上？

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

css for image

.img-thumbnail {
display: inline-block;
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;
}

enter image description here

Answer 1

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

这会使您段落中的所有文字都超过图片的宽度。否则，段落正在做它应该做的事情，它是围绕图像流动的。

图像本身实际上与段落重叠，后者将文本推送过来。你希望文本的左边缘排成一行，你必须添加足够的空白来考虑图像。

示例：http://jsfiddle.net/nYw6S/

Answer 2

请参阅此jsFiddle：http://jsfiddle.net/4enb7/

HTML

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

CSS：

.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中会使它们全部对齐。

Answer 3

将段落标记（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>

请参阅此处示例http://jsfiddle.net/3fbB3/4/

从右侧图像下方移动文本

3 个答案: