如何在同一行上右移文本om图像 [英] how to float right text om image on same line

问题描述

我如何在图像右侧显示文字？内联？

这是我的代码

How could i display text on right side of image? Inline?
Here is my code

<div id="background">

 <img class="image" src="banner.jpg"  />
<div id="text"><p>My text</p></div>

</div>

#background
{
background-color:rgb(30, 30, 30);


}
.image
{
height:140px;
background-size:cover;
background-position-x:center;
background-position-y:center;
display:block;


}

#text p
{
float:right;
width:210px;
padding:20px;
}

推荐答案

您可以使用CSS执行的操作是：

Thing what you can do with your CSS is:

#background {
    background-color:rgb(30, 30, 30);
    overflow: hidden;
}

.image {
    height:140px;
    background-size:cover;
    background-position-x:center;
    background-position-y:center;
    display:block;
    float: left;
}

#text p {
    width:210px;
    padding:20px;
    float: left;
}

首先将float设置为左边的图像和段落。

设置背景div溢出后隐藏。



如果你想要进入你的div的中心，你必须用类创建一个这样的内部div（在这种情况下称为中心）：

First set float to left to your image and paragraph.
After set background div overflow to hidden.

If you would like to move into the center your div you have to create an inner div like this with a class (in this case called center):

<div id="background">
    <div class="center">
        <div id="text">
            <p>My text</p>
        </div>
        
        <img class="image" src="banner.jpg" />
    </div>
</div>

并允许以下CSS为中心类：

And allow the following CSS to center class:

.center {
    width: 30%;
    margin: 0 auto;
}

这篇关于如何在同一行上右移文本om图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！