Question

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

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

然而，即使我改变了我的图像的大小，它总是在文本之上...为什么？

最后我使用了模板＆＃34; initializr＆＃34; （参见谷歌），因为它也使所有响应，我需要！无论如何，谢谢大家！

Answer 1

评论者要求我与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>

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

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

Answer 2

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

所以，在这种情况下，

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

或者这可能也有效：

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

Answer 3

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

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

http://jsfiddle.net/3Luby/

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

3 个答案: