Html 横幅图像的位置和比例_Html_Css_Header_Banner

Html 横幅图像的位置和比例

html css

Html 横幅图像的位置和比例,html,css,header,banner,Html,Css,Header,Banner,我在一个项目上工作，由于某种原因，我不能把横幅放在我想要的位置上。我正在看一段代码，它设置了我想要的样子： HTML: 我已经尝试过复制CSS以放入我的项目（和html），但它仍然不起作用有了真实的文本和更多的信息，它就能完美地流动我想可能更有用的是我自己尝试过的代码： <!doctype html> <html lang="en"> <head>

我在一个项目上工作，由于某种原因，我不能把横幅放在我想要的位置上。我正在看一段代码，它设置了我想要的样子：

HTML:

我已经尝试过复制CSS以放入我的项目（和html），但它仍然不起作用

有了真实的文本和更多的信息，它就能完美地流动

我想可能更有用的是我自己尝试过的代码：

            <!doctype html>

                <html lang="en">

                <head>
                    <meta charset="utf-8">
                    <title>Title</title>
                    <link rel="stylesheet" href="css/styles.css">
                </head>

                <div class="container">

                <header>
                    <h1>
                      <img src="images/banner.png" alt="banner">
                        <!--<body background="images/banner.png" alt="banner" >-->
                        Home Page
                    </h1>

                </header>

                </div>

我想最简单的方式是，我试图让我的横幅在我的h1左边有一个合适的大小（尽管我可以通过编辑宽度和高度来管理），而不必推任何东西，让它看起来像是“单独的”

我不确定你到底想做什么。但我猜，当您使用float:left时，您可能会遇到类“container”的问题

我相信您可以在.CSS容器中添加一行代码来解决这个问题

overflow: auto;

谢谢你的建议，但这不是我想要的。我将尝试用图片来帮助形象化我正在寻找的东西。

            <!doctype html>

                <html lang="en">

                <head>
                    <meta charset="utf-8">
                    <title>Title</title>
                    <link rel="stylesheet" href="css/styles.css">
                </head>

                <div class="container">

                <header>
                    <h1>
                      <img src="images/banner.png" alt="banner">
                        <!--<body background="images/banner.png" alt="banner" >-->
                        Home Page
                    </h1>

                </header>

                </div>

            h1
                {
                text-decoration:underline;
                text-align:center;

                }

            h1 img
                {
                height: 40%;
                width: 40%;
                margin: 0px 10px;
                padding: 5px;
                float: left;
                }
            .container
                {
                width: 80%;
                max-width: 960px;
                margin:0px auto;
                }

overflow: auto;