html - 响应式 div over div 与文本对齐

Question

不确定是否可行，但我有一个个人资料页面，其中有一个 div(横幅)、第二个 div(用户信息)和第三个 div(个人资料图片)。我试图让它成为一个响应式设计，但是当我滚动文本时，它没有与个人资料图片对齐。我尝试将图片从包装器 (div) 中移出以在第二个 div (profile-info) 上工作，但它不会按照我想要的方式对齐

这是一张我希望它看起来如何的图片:

在图片中，第二个 div(个人资料信息)位于第一个 div(横幅)的底部，紧靠第三个 div(个人资料图片)对齐。但是我无法让代码按照我想要的方式工作。

html:

<div class="wrapper">
  <!--Profile picture, banner, and main information-->
    <div class="profile-wrapper">
      <!--Banner-->
      <img class="banner" src="/assets/images/banner/default.png" />


      <!--user information-->
      <div class="user-information">
        <h1>@Username</h1>
        <p>Firstname Lastname</p>
      </div>
      <!--profile picture-->
      <img class="avatar" src="/assets/images/users/default.png" />
    </div>
</div>

CSS:

/* **************************************************************************************
///////////////////////Main Style////////////////////////////////////////////////////////
************************************************************************************** */
    .avatar {
        position:relative;
        border: 2px solid #fff;
        border-radius:5px;

        margin-top:-13%;
        margin-left: 5%;

        width:15%;
        max-height:180px;
        max-width:180px;
        min-height:90px;
        min-width:90px;
        height:auto;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%
        margin:0 auto;
    }

    .banner {
        position:relative;
        border-bottom: 2px solid #fff;
        margin-top:0;
        height:40%;
        max-height:420px;
        min-height:340px;

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 50vh;
    }

    .profile-wrapper {
        margin-top:0;
        margin:0 auto;
        overflow:hidden;
        width:100%;
    }

    .user-information {
        color:#fff;
        position:relative;
        font-weight:500;

        width:100%;
        height:10%;

        background-color:#000;
        padding:5px;
        margin-bottom:0;
        background:rgb(0,0,0 .8);
    }

    .user-information h1 {
        font-size: 20px;
    }

    .user-settings {
        float:right;
        font-size:24px;
        padding:5px;
    }

/* **************************************************************************************
///////////////////////Tablet////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 1024px) {
    .banner {
        height:20%;
    }
}



/* **************************************************************************************
///////////////////////Phone/////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 768px) {
    .banner {
        height:20%;
    }
}

如果需要，这里是主要的 CSS:

/* Basic Styles */
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);


* { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}
body {
  background: #e9ebee;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;

}

Answer 1

改变头像的css和位置。

/* Basic Styles */
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);


* { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}
body {
  background: #e9ebee;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;

}

.avatar {
        position:absolute;
  top:50px;
        border: 2px solid #fff;
        border-radius:5px;

        margin-top:-13%;
        margin-left: 5%;

        width:15%;
        max-height:180px;
        max-width:180px;
        min-height:90px;
        min-width:90px;
        height:auto;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%
        margin:0 auto;
    }

    .banner {
        position:relative;
        border-bottom: 2px solid #fff;
        margin-top:0;
        height:40%;
        max-height:420px;
        min-height:340px;

        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 50vh;
    }

    .profile-wrapper {
        margin-top:0;
        margin:0 auto;
        overflow:hidden;
        width:100%;
    }

    .user-information {
        color: #fff;
    position: static;
    font-weight: 500;
    width: 100%;
    height: 10%;
    background-color: #000;
    padding: 5px;
    margin-bottom: 0;
    background: rgb(0,0,0 .8);
position:relative;
    }


    .user-information h1 {
        font-size: 20px;
          padding-left: 200px;
    }
 .user-information p{ padding-left: 200px; }

    .user-settings {
        float:right;
        font-size:24px;
        padding:5px;
    }

/* **************************************************************************************
///////////////////////Tablet////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 1024px) {
    .banner {
        height:20%;
    }
}



/* **************************************************************************************
///////////////////////Phone/////////////////////////////////////////////////////////////
************************************************************************************** */
@media all and (max-width: 768px) {
    .banner {
        height:20%;
    }
}

<div class="wrapper">
  <!--Profile picture, banner, and main information-->
    <div class="profile-wrapper">
      <!--Banner-->
      <img class="banner" src="/assets/images/banner/default.png" />


      <!--user information-->
      <div class="user-information">
              <img class="avatar" src="/assets/images/users/default.png" />

        <h1>@Username</h1>
        <p>Firstname Lastname</p>
      </div>
      <!--profile picture-->
    </div>
</div>