如何将文本定位到右侧？

Question

正如您从下面的代码片段中看到的那样，文本显示在图像下方。如何使它显示在图像旁边？

#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;
}

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

#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;
}

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

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

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

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

我还会将 width 属性更改为使用百分比，这样它的响应速度更快，扩展性更好。

Answer 3

您可以在这里使用 2 列 1 行的 table 而不是 css。

图像必须保留在第一个 td 中，文本必须保留在另一个 td 中，这将避免您 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>

保持 table width= 100% 并使用给定的代码。文本将右对齐，图像将左对齐...

如何将文本定位到右侧？

How to position text to right?

html

css

css-float