在div中将div放在响应式设计中

Question

我想在响应式设计中将div（个人资料图片）放在anoter div（个人资料横幅）中。不是一个问题，但我也希望内部div（个人资料图片）略微在外部div的外部。它只需要在PC上显示如此，它可以在移动设备和平板电脑上以不同的方式显示。

下面是我试图创造的图片：

所以我想要的是div内部的响应div，内部div略微在外面。由于屏幕分辨率不同，它必须具有响应性。

我知道这更像是一个请求然后是一个答案，但我不知道如何做到这一点

Answer 1

你必须使用position:absolute;作为内部div，使用position:relative;作为外部div。此外，如果您希望将文本放在父框内的个人资料图片之后，则必须为父框添加一个填充。的 DEMO

.user-info{
  background:#444;
  position:relative;
  width:100%;
  height:200px;
  box-sizing:border-box;
  padding:16px 16px 16px 216px;
  color:#FFF;
  font-size:32px;
  }
  .profile-picture{
    background:#444;
    width:150px;
    height:150px;
    position:absolute;
    border:2px solid #FFF;
    left:50px;
    bottom:-50px;
    color:#FFF;
    text-align:center;
  }

<div class="user-info">
  <div class="profile-picture">Profile Picture</div>
  
  User Information
</div>

如果您想处理响应，也可以使用媒体查询（调整大小以查看它）： DEMO

Answer 2

Codepen演示：

http://codepen.io/anon/pen/dpgXqp

* {
  transition: .5s all ease-in-out;
  -webkit-transition: .5s all ease-in-out;
  -moz-transition: .5s all ease-in-out;
  -ms-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
}
.propic {
  border: 2px solid #e2e2e2;
  margin-top: -130px;
  margin-left: 70px;
}
.cover {
  border: 2px solid #e2e2e2;
  margin-left: 50px;
  margin-top: 20px;
}
.propic:hover,
.cover:hover {
  box-shadow: 0 0 10px 10px #9f9f9f;
  -webkit-box-shadow: 0 0 10px 10px #9f9f9f;
  -moz-box-shadow: 0 0 10px 10px #9f9f9f;
  -ms-box-shadow: 0 0 10px 10px #9f9f9f;
  -o-box-shadow: 0 0 10px 10px #9f9f9f;
}

<img src="http://4.bp.blogspot.com/-2UPJD5hegLs/UR4MlzkGTUI/AAAAAAAAAWk/xpff536gpIQ/s1600/mycover.jpg" alt="Cover_Photo" class="cover" />
<br />
<img src="http://4.bp.blogspot.com/-b3Ty2n3mrOc/UR4MAXUXHDI/AAAAAAAAAWQ/CS31CdrnNY8/s1600/profp.jpg" class="propic" alt="Profile_picture" />

Codepen链接：

http://codepen.io/anon/pen/dpgXqp

Answer 3

.parent{
    width: 400px;
    height:200px;
    background-color:red;
}
.sibling{
position: absolute;
    left: 100px;
    top: 150px;
    width:300px;
    height:200px;
    background-color: green;
}

<div class="parent">
   
</div>
 <div class="sibling">
    </div>