图片旁边的文字不适用于特定图片。为什么？答案

【问题标题】：Text besides Image doesnt work for specific image. Why?图片旁边的文字不适用于特定图片。为什么？
【发布时间】：2014-04-11 00:24:40
【问题描述】：

我使用以下代码将文本放在图像旁边：

<div style="display:inline-block;vertical-align:bottom">
        <p><img src="CIMA/CimaMetanoia.png" alt="Cool"   height="50%" width="50%" /></p>
    </div>

    <div style="display:inline-block;">
        <p class="text"> 
        <div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
        <div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
        <div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
        <div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
        </p>
    </div>

但是，即使我更改了图像的大小，它总是在文本上方...为什么？

最后我使用了模板“initializr”（参见 google），因为它也使所有响应式响应，这是我需要的！还是谢谢大家！

【问题讨论】：

标签： html css image positioning

【解决方案1】：

您可以尝试将位置属性添加到图像

所以，在这种情况下，

image{position:fixed , absolute , relative; top:50%; left:50%;}

或者这也可以：

<div>
<image></image>
<p></p>
</div>

【讨论】：

【解决方案2】：

一位评论者要求我与your code only 合作。因此，这是一个使用您的代码的解决方案，使 2 个 div 彼此相邻。

<div style="float: left; width: 49%;">
<p><img alt="Cool" src="http://placehold.it/350x150" height="50%" width="50%" /></p>
</div>

<div style="float: right; width: 49%;">
<p class="text"> 
<div> <font color="#d54646"><b>MOVIDA</b> es un ministerio christiano, latino, internacional <br> e interdenominacional con el propósito de: </font> <br><br> </div>
<div> <b><font color="#2089a4">DESAFIAR</font></b> <br>al joven christiano a una entrega total a Dios y a crecer en su relación con El.<br><br> </div>
<div> <b><font color="#2089a4">PROVEERLE</font></b> <br> herramientas para que descubra sus dones y talentos.<br><br> </div>
<div> <b><font color="#2089a4">MOTIVARLO</font></b> <br> a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.<br> </div>
</p>
</div>

已编辑 下面我发布的代码在我看来更适合您的解决方案。只是想提供一些替代方案。

<style type="text/css">
    .left {
      float: left;
      width: 50%;
      height: 50%;
    }
    .left img {
      width: 100%;
      height: 100%;
    }
    .right {
      float: right;
    }
    .movida strong {
      color: #d54646;
    }
    .common strong {
      color: #2089a4;
    }
    .text strong {
      display: block;
      font-weight: bold;
    }
</style>
<div class="left">
    <p><img src="CIMA/CimaMetanoia.png" alt="Cool" /></p>
</div>
<div class="right">
    <p class="text"> 
        <div><span class="movida"><strong>MOVIDA</strong>es un ministerio christiano, latino, internacional e interdenominacional con el propósito de:</span></div>
        <div><span class="common"><strong>DESAFIAR</strong>al joven christiano a una entrega total a Dios y a crecer en su relación con El.</span></div>
        <div><span class="common"><strong>PROVEERLE</strong>herramientas para que descubra sus dones y talentos.</span></div>
        <div><span class="common"><strong>MOTIVARLO</strong>a un servicio comprometido en su iglesia local y movilizarlo a las misiones mundiales.</span></div>
    </p>
</div>

【讨论】：

hmm 不幸的是，这在我的屏幕上不起作用。图片和文字不在一个层次上。右边的文字也离开了屏幕……
您可以在 .right div 上指定 width。不知道为什么投反对票？我清理了很多不应该使用的元素，并提供了一种更干净，更简洁的方法来解决您的问题。干杯，祝你好运！
使用<br> 表示间距，<font> 表示样式，inline styles 并不是编写上述代码的正确方法。

【解决方案3】：

文本被推到图像下方，因为两个容器 div 的组合宽度比页面宽，所以它将第二个 div 推到第一个下方：

<div style="display:inline-block;vertical-align:bottom;width:200px;">

http://jsfiddle.net/3Luby/

【讨论】：