Question

我正在研究一个项目，由于某种原因，我无法将横幅放在我想要的位置。有我正在寻找的代码帽子设置了我想要的样子：

HTML：

            <!doctype html>
            <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>Title</title>
                <link rel="stylesheet" href="css/styles.css">
            </head>
            <body>
            <div class="container">

                <header>
                    <h1>
                        <a href="index.html">
                            <img src="images/logo.png" alt="logo">
                            <!--<div>-->
                                They're Animals
                            <!--</div>-->
                        </a>
                    </h1>
                </header>



            </div><!--.container-->
            </body>
            </html>

以及适合我理想旗帜的CSS是：

            /*  *************************************
                Base
                ************************************* */
            body { 
                background-color: #dfeff0;
                color: #333333;
                font-family: Arial, Helvetica, sans-serif;
            }

            header a { color: #ad235e;}
            header a:hover { color: #000000;}
            h1 {
                color: #ad235e;
                font-size: 14px;
            }
            h1 a:hover img { opacity: 0.7;}


            /*  *************************************
                Modules
                ************************************* */
            .container {
                margin: 0 auto;
                width: 90%;
                max-width: 960px;
                position: relative;
            }

我已经尝试过复制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>

我对CSS的尝试：

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

我想最简单的方法就是我试图让我的横幅尺寸合适（虽然我可以通过编辑宽度和高度来管理它）在我的h1的左边，而不是推动所有东西使它看起来像它是“孤独的”。

This is what I would like my header to look like (the logo right next to the title without it pushing the content away

With my content on my page, this is how it actually looks.

Answer 1

我不确定你想要做什么。但我猜你正在使用 float：left 你可能会遇到类＆＃34;容器＆＃34;的问题。

我相信你可以在.container CSS中添加一行并解决问题。

overflow: auto;

横幅图像放置和比例

1 个答案: