Der Text erscheint nicht neben dem schwebenden Bild

Sorry, ich bin ein Anfänger auch ich würde gerne die Lösung verstehen.Der Text erscheint nicht neben dem schwebenden Bild

Ich möchte, dass der Text neben dem Bild schwebt, auch habe ich festgestellt, dass das Bild nicht vollständig angezeigt wird, stattdessen ist ein Teil davon unterhalb der Kopfzeile.

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>

Quelle

2017-05-20 Modina Begum

in Ihrem HTML-Code, es sieht aus wie Sie nicht ids Set für Ihre Bilder haben. Führt die Behebung dieses Problems zur Lösung des Problems? – APerson

Scheint nicht zu –

vielleicht er/sie meine '#showtime img' wenn so fügen Sie einfach 'float: left' für diese ID @ModinaBegum –

Der Text erscheint nicht neben dem schwebenden Bild

Antwort

Verwandte Themen