文字不會出現在浮動圖像旁

對不起，我是初學者，我也想了解解決方案。文字不會出現在浮動圖像旁

我希望文字在圖片旁邊浮動，同時我注意到圖片沒有完全顯示，而是其一部分位於標題下方。

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>

來源

2017-05-20 Modina Begum

在你的HTML代碼，它看起來像你沒有的id爲您的圖片集。解決這個問題是否解決了問題？ – APerson

似乎並不 –

也許他/她的意思是'#showtime img'如果是這樣，只需爲該id添加'float：left'@ModinaBegum –

文字不會出現在浮動圖像旁

回答

相關問題