抱歉,我是初学者,我也想了解解决方案。
我希望文本浮动在图像旁边,我还注意到图像没有完全显示,而是其中一部分在标题下方。
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 © is reserved</p>
</footer>
</body>
</html>
使用align="left"
将图像浮动在某些文本旁边。该部分 showtime 需要留有空格,以允许页眉高度与其重叠。
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 © is reserved</p>
</footer>
</body>
</html>
将标头的 CSS 替换为:
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;
top: 0; // Added. Is required for fixed positioning
}
并添加以下内容:
#showtime {
margin-top: 70px;
}
您需要添加到css #showtime { padding-top: 100px;}
position: fixed;
因为从相对定位中删除了元素,因此您需要在顶部添加额外的空间。
并将 id 添加到 img 标记<img id="img1" src="./images/Person1.jpg" width="300px;" height="300px;">
。这实际上不是最好的主意。最好使用类。
您应该通过向 img 添加一个类来以正确的方式执行此操作,id 对于所有 HTML 文档元素必须是唯一的,您不能多次使用它。例如,您可以执行以下操作:
.CSS .img1 { float: left; }
.HTML <img class="img1" src="./images/Person1.jpg" width="300" height="300">