对齐div中的文本和img

Question

目前在编解码器上进行投资组合挑战。我试图将文本对齐到另一个文本的上方，然后在他们旁边显示一个img。但似乎他们不认识我的div里面的空白空间。

这里是我的代码

#div1 { 
 
    width: 80%; 
 
    height: 500px; 
 
    background-color: #A09F9C; 
 
    text-align: center; 
 
    margin-left: 10%; 
 
} 
 
#about { 
 
    color: white; 
 
    width: 500px; 
 
    height: auto; 
 
    padding-top: 10%; 
 
    padding-left: 5%; 
 
} 
 
#avatar { 
 
    width: 300px; 
 
    height: 300px; 
 
    float: right; 
 
    border-radius: 50%; 
 
    margin-right: 5%; 
 
    margin-top: auto; 
 
}

<div id="div1"> 
 
    <p id="about">aaaaaaaaaaaaaaaaaaaaaaaaaaa ...</p> 
 
    <img id="avatar" src="http://i.imgur.com/scMYPYt.jpg"> 
 
    <h4> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </h4> 
 
</div>

This is how it's supposed to look like.

如果你想看看，here it's my codepen.

Answer 1

入住这里：

`http://codepen.io/anon/pen/JKaqbE` 

顺便说一句我建议你学会使用materialize或bootstrap来加速开发。

HTML：

<div id="navtab"> 
     <ul> 
      <li class="button"><a href="#"> ABOUT</a></li> 
      <li class="button"><a href="#"> PORTFOLIO</a></li> 
      <li class="button"><a href="#"> CONTACT</a></li> 
    </div> 

    <div> 
     <div id="div1"> 
      <p id="about"> The name is Gaston and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</p> 
      <img src="http://i.imgur.com/scMYPYt.jpg"> 
      <div id="spdline"></div> 

     </div> 

     <div id="div2"> 
      <h4> PORTFOLIO </h4> 
     </div> 

     <div id="div3"> 
     </div> 
    </div> 

    <div id="div4"> 
    </div> 

    <div id="div5"> 
    </div> 

CSS：

body { 
    background-color: grey; 
} 

#navtab { 
    background-color: purple; 
    height: 60px; 
    position: fixed; 
    width: 100%; 

} 

ul { 
    padding-top: 15px; 
    padding-right: 15px;  
    float: right; 
    margin-right: 10%; 

} 

li { 
    display: inline-block; 
    padding: 5px 15px 5px 15px; 

} 

li:hover { 
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
} 

a { 
    color: grey;  
} 

a:hover { 
    color: #2B303A; 
    text-decoration: none; 
} 

li:active { 
    background-color:white; 
    text-decoration: none; 
} 

a:active { 
    color: black; 
    text-decoration: none; 
} 


#div1 { 
    width: 80%; 
    background-color: #A09F9C; 
    text-align: center; 
    margin-left: 10%; 
    display: inline-flex; 
} 

#about{ 
    padding: 10% 10%; 
    color: white; 
    float: left; 
} 

img { 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; 
    margin-top: 10%; 
    margin-right: 10%; 
    margin-bottom: 50%; 
    float: right; 
} 



#spdline { 
    width: 300px; 
    height: 3px; 
    background-color: white;  
    display: block; 

} 

#div2 { 
    width: 80%; 
    background-color: white; 
    text-align: center; 
    margin-left: 10% ; 


} 

#div1, #div2, #div3 { 
    border-style: solid; 
    border-width: 1px; 
    border-color: grey; 
}