Question

从下面的代码段中可以看到，文字显示在图片下方。如何使其显示在图像旁边？

＆＃13;

#pag{
    margin-top: 20vh;
    margin-right: 60vw;
    height: 30vh;
    width: 45vh;
}

#pa{
    float: right;
    margin-right: 8vw;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
}

＆＃13;

<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

＆＃13;

Answer 1

您可以使用的解决方案之一是浮动。您可以将float:left;提供给image，下一个元素将位于image后面。

#pag{
    margin-top: 20vh;
    //margin-right: 60vw;
    height: 30vh;
    width: 45vh;
    float:left;
}

#pa{
    margin-right: 8vw;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
}

			<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
                <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>

Answer 2

＆＃13;

#pag{
    width: 20%;
    vertical-align: top;
}

#pa{
    display: inline-block;
    font-size: 60px;
    font-family: Courier;
    margin-bottom: 40vh;
    margin-left: 15px;
    width: 70%;
    margin-top: 0px;
}

＆＃13;

<div>
<img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p>
</div>

＆＃13;

这是另一种不使用浮动元素的方式。

现在，margin-right: 60vw;正在将文本推送到下一行（这是一个很大的余地！）。

因为<p>是块级元素，所以它总是显示在它自己的行上，除非你告诉它不行。为此，您可以使用display: inline-block;样式。

我还会更改width属性以使用百分比，因此它的响应速度更快，并且可以更好地扩展。

Answer 3

而不是只有css，你可以在这里使用2列和1行的表。

图像必须保存在第一个td中，文本保存在另一个td中，这样可以避免ur css对齐图像的文本

例如

    <table>
    <tr>
      <td>
         <img id="pag" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
      </td>
      <td>
         <p id="pa">Google lorem ipsume lorem ipsumelorem ipsume</p> 
     </td> 
   </tr>
   </table>

保持表格宽度= 100％并使用此给定代码。文本将向右对齐，图像将在左侧...

如何将文字定位到正确的位置？

3 个答案: