gpt4 book ai didi

html - 横幅图像放置和比例

转载 作者:行者123 更新时间:2023-11-28 08:54:29 24 4
gpt4 key购买 nike

我正在做一个元素,但由于某种原因我无法将横幅放置在我想要的位置。我正在查看的代码设置了我想要成为的样子:

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.

最佳答案

我不确定你到底想做什么。但我猜你正在使用 float:left 你可能面临“容器”类的问题。

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

overflow: auto;

关于html - 横幅图像放置和比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27198907/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com