Question

我正在制作一个项目并且必须建立一个小型网站。我想在左侧放置一个图像，在图像的右侧放置文本。

我想将文本 Car Rental 放在汽车徽标旁边。我怎么做？ Html代码：

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <section class=banner style="width:500px;height:500px;">
        <img src="http://pattiengineering.com/wp/wp-content/uploads/
        icon-compact-car.png"
        alt="Car-Rental"style="width:500px;height:400px;">
        <p id="logo-text">Car Rental</p>

    </section>

</body>
</html>

CSS文件：

body{
  background-color:black;
}

.banner {
  position:relative;
  margin:12em;  
 }

img {
  z-index:-1;
  float:left;
}

#logo-text {
  color:white;
}

Answer 1

将文本右对齐，如下所示：

create proc SP_1 ( @aaa varchar(8000) )
begin    
 --Logic
end

Demo

Answer 2

您有<section>的内联样式，如果需要，请考虑将其移至CSS。
您所在地的样式的原因width:500px;您没有足够的空间容纳该文本。
您还需要提供文字float: left，因此它会移到图片的右侧

最终代码：

<强> HTML：

<section class="banner">
  <img src="http://pattiengineering.com/wp/wp-content/uploads/icon-compact-car.png" alt="Car-Rental" style="width:500px;height:400px;">
  <p id="logo-text">Car Rental</p>
</section>

<强> CSS：

body {
  background-color:black;
}

.banner { 
  position:relative; 
  margin:12em;
  width:100%;
  height: auto;
}

img {
  z-index:-1;
  float:left;
}

#logo-text {
  color:white;
  float: left;
  padding: 160px 100px;
  width:100px;
}

Answer 3

按照上述人员的说法，但也要记住，您可以使用

两个容器

Float：left

要相互堆叠，然后在两个容器之间产生更少的空间，这也将允许您通过边距和填充来控制容器之间的空间

Answer 4

将图像从500px缩小到400px，

并添加css

<html>
    <head>
        <title>Test</title>
        <style>         
            body {
                background-color: black;
            }
            .banner {
                margin: 12em;
                position: relative;
            }
            img {
                float: left;
                z-index: -1;
            }
            #logo-text {
                color: white;
                float: left;
                margin-top: 12em;
            }
        </style>
    </head>
    <body>
        <section class=banner style="width:500px;height:500px;">
            <img src="http://pattiengineering.com/wp/wp-content/uploads/
            icon-compact-car.png"
            alt="Car-Rental"style="width:400px;height:400px;">
            <p id="logo-text">Car Rental</p>
        </section>
    </body>
</html>

请尝试以下代码：

{{1}}

文字和图像定位

4 个答案: