如何使用Position Absolute使2个div响应?

时间:2016-06-20 06:00:59

标签: html css html5 twitter-bootstrap

我得到了以下结构

<div class="container">
    <div class="html5">
     <h3>HTML5</h3>
        </div>
        <div class="pc"></div>
    </div>

和CSS

.pc {
    position: absolute;
    top: 81%;
    left: 38%;
    width: 321px;
    height: 240px;
    background-image: url('images/pc.png');
    background-size: cover;
}
.html5 {
    width: 321px;
    height: 240px;
    background-image: url('images/1.png');
    background-size: cover;
    position: absolute;
    top: 44%;
    left: 27%;
}

我想将.html5置于某个位置.pc,是否有任何方法可以使其响应,因此在调整网页大小时,我仍然可以将其保持在相同的距离其他div?

我正在使用bootstrap,不知道他的某个课程是否有任何技巧。JSFiddle

2 个答案:

答案 0 :(得分:0)

您好这是最初的解决方案,但如果您正在使用bootstrap,那么您需要添加它的库和一些预定义的类。使其响应的另一个选择是使用媒体查询。

.pc {
 width: 321px;
height: 240px;
background-image: url('http://cremc.ponce.inter.edu/carpetamagica/cuadradoquisosercirculo_files/image001.gif');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}
.html5 {
width: 321px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-fId_0wMCKhg/Tz8dxylpK2I/AAAAAAAAJCE/7gF4evDn5zo/s1600/que%2Bes%2Bun%2Btriangulo.jpg');
background-size: cover;
float:left;
margin-left:10%;
margin-top:10%;
}

答案 1 :(得分:0)

我认为你不能使用目前的结构。我建议这样的事情,相对于.pc定位.html5。

&#13;
&#13;
.pc {
  position: absolute; 
  ...
}

.html5 {
  position: relative;
  ...
}
&#13;
<div class="container">
  <div class="pc">
    <div class="html5">
      <h3>HTML5</h3>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;