Question

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

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

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>

Answer 1

将标题的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;
}

Answer 2

使用align="left"在某些文字旁边浮动图像。 showtime部分需要空格以允许标题高度重叠。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 3

您需要添加到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">

文本未出现在浮动图像

3 个答案: