html - 在 div 中对齐文本和 img

Question

目前正在 codecamp 进行作品集挑战。我试图将一个文本对齐到另一个文本上方，然后在它们旁边放置一个 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` 

顺便说一句，我建议您学习使用物化或 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;
}