爲什麼我的div不會排隊？

這裏是我的HTML爲什麼我的div不會排隊？

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Oaki Softworks 
    </title> 
    <link href='style.css' rel='stylesheet' type='text/css'> 
    <link rel="icon" href="favicon.png"> 
</head> 
<body> 
    <div id="navigation"> 
     <div style="height:20px;width=15%;float:right;"> 
      <a href="https://www.facebook.com/oakisoftworks/?fref=ts"><img src="facebook_icon.png" class="social_media_icon"></a> 
      <img src="instagram_icon.png" class="social_media_icon"> 
      <img src="twitter_icon.png" class="social_media_icon"> 
      <img src="youtube_icon.png" class="social_media_icon"> 
     </div> 
     <div class="navigation_tile">Contact Us</div> 
     <div class="navigation_tile">Careers</div> 
     <div class="navigation_tile">Products</div> 
     <div class="navigation_tile">About Us</div> 
    </div> 
    <div id="content"> 
     <div id="blurb"> 
      <img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;"> 
      <h2>Video games as art.</h2> 
      <p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p> 
     </div> 
     <div id="main_pic"> 
      <img src="art.jpg"> 
     </div> 
    </div> 
    <div id="footer"> 
     <p> 
      Oaki Softworks&trade; 
      <br>Fort Collins, CO 80521 
      <br>[email protected] 
     </p> 
    </div> 
</body> 
</html>

這裏是我的CSS

body { 
    background-color: #021034; 
    padding: 0px; 
    margin: 0px; 
} 

#navigation { 
    position: fixed; 
    background-color: black; 
    height: 40px; 
    width: 100%; 
    color: white; 
    color: #adb7bd; 
    font-family: 'Lucida Sans', Arial, sans-serif; 
    font-size: 16px; 
    line-height: 26px; 
} 

div.navigation_tile { 
    height: 30px; 
    width: 15%; 
    align-content: center; 
    text-align: center; 
    float: right; 
    margin: 5px; 
} 

div.navigation_tile:hover { 
    background-color: #092466; 
} 

div.navigation_tile:active { 
    background-color: white; 
    color: black; 
} 

#content { 
    margin-top: 30px; 
    display: inline-block; 
    text-align: justify; 
} 

#blurb{ 
    padding: 40px 0 0 25px; 
    width: 28%; 
    height: 250px; 
} 

#main_pic { 
    float: right; 
    width: 66%; 
    height: 250px; 
    border: 10px #092466 solid; 
    overflow: hidden; 
} 

h1{ 
    color: #A5B7E3; 
    font-family: 'Lato', sans-serif; 
    font-size: 54px; 
    font-weight: 300; 
    line-height: 58px; 
    margin: 0 0 20px; 
} 

h2 { 
    color: #6681C4; 
    font-family: 'Lato', sans-serif; 
    font-size: 34px; 
    margin: 0 0 10px; 
} 

p{ 
    text-indent: 20px; 
    color: white; 
    font-size: 12px; 
    font-weight: 100; 
    font-family: 'Lucida Sans', Arial, serif; 
    line-height: 20px; 
} 

img.social_media_icon{ 
    height: 15px; 
    width: 15px; 
    padding: 5px; 
} 

#footer { 
    height: auto; 
    width: 100%; 
    background-color: black; 
    text-align: center; 
    padding: 5px; 
}

我試圖讓我的#blurb DIV與我父＃內容專區內我#main_pic div來排隊，但我遇到麻煩了。有人能指引我朝着正確的方向嗎？

來源

2016-11-05 Ben Kulka

#blurb { 
    [...] 
    float: left; 
} 
#content { 
    [..] 
    overflow: hidden; 
}

另外考慮去掉高度：250px;從#blurb ...很難說是由於某種原因需要的。

來源

2016-11-05 20:11:44 marcinrek

爲什麼我的div不會排隊？

回答

相關問題