gpt4 book ai didi

html - 文本没有出现在 float 图像旁边

转载 作者:行者123 更新时间:2023-11-28 03:43:39 25 4
gpt4 key购买 nike

对不起,我是初学者,我也想了解解决方案。

我希望文本 float 在图像旁边,我还注意到图像没有完全显示,而是有一部分位于标题下方。

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
margin-top:0;
}

header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}

header ul {
margin: 0;
}

header li {
list-style-type: none;
float: left;
padding-right: 20px;
}

#showtime img {
width:300px;
height:300px;


}
.clearfix {
overflow:auto;
}
#img1 {
float:right;

}
#img2 {
float:left;
}

footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>

<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="#">PHOTO GALLERY</a></li>
<li><a href="#">VIDEO GALLERY</a></li>
</ul>
</nav>
</header>
<section id="showtime">
<div>

<a href="./images/Person1.jpg"><img src="./images/Person1.jpg" width="300px;" height="300px;"></a>
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>

<footer>
<p>Note that any copyright &copy; is reserved</p>
</footer>
</body>
</html>

最佳答案

使用 align="left" 使图像 float 在某些文本旁边。放映时间部分需要空白空间,以允许标题高度与其重叠。

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p, h1 {
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
margin-top:0;
}

header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}

header ul {
margin: 0;
}

header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
padding-top:60px;
}
#showtime img {
width:300px;
height:300px;


}
.clearfix {
overflow:auto;
}
#img1 {
float:right;

}
#img2 {
float:left;
}

footer {
margin-top:30px;
background-color:#191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear:both;
}
footer p{
text-align: center;
color: white;
}
<!doctype html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet"/>
<script type="application/javascript" src="Home.js"></script>
</head>
<body>

<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="#">PHOTO GALLERY</a></li>
<li><a href="#">VIDEO GALLERY</a></li>
</ul>
</nav>
</header>
<section id="showtime">
<div>

<a href="./images/Person1.jpg"><img align="left" src="./images/Person1.jpg" width="300px;" height="300px;"></a>
<h2>Image</h2>
<p>The image will always try to be unique from the odthers and we will always try to deliver the best photo in our limited time</p>
</div>
</section>

<footer>
<p>Note that any copyright &copy; is reserved</p>
</footer>
</body>
</html>

关于html - 文本没有出现在 float 图像旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44091642/

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