让我的DIv响应

Question

我有一个Div分为3个Div。我想让这些Div的响应。 下面给出了代码段。我还试图让位置相对，但这不起作用。

＆＃13;

＆＃13;

#upleft {
  width: 34%;
  height: 336px;
  background: red;
  float: left;
  position: relative;
}

#upright {
  width: 33%;
  height: 336px;
  background: blue;
  float: left;
  position: relative;
}

#below {
  height: 337px;
  width: 33%;
  background: green;
  float: right;
  position: relative;
}

.test {
  width: 100%;
  height: 317px;
  background: #f3f3f3 none repeat scroll 0 0;
  box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 3;
  top: 181px;
  left: 0px;
  height: 338px;
  width: 100%;
}

＆＃13;

<div class="test">
  <div id="upleft">a1</div>
  <div id="upright">a2</div>
  <div id="below">a3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请帮助

Answer 1

将position:relative;的CSS中的.test更改为position:absolute;。

.test{
   ...
    position: absolute;
   ...
 }

Answer 2

使用媒体查询：

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  #upleft { width: 100%; }
  #upright { width: 100%; }
  #below { width: 100%; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  #upleft { width: 34%; }
  #upright { width: 33%; }
  #below { width: 33%; }
}
#upleft {
  height: 336px;
  background: red;
  float: left;
  position: relative;
}
#upright {
  height: 336px;
  background: blue;
  float: left;
  position: relative;
}
#below {
  height: 337px;
  background: green;
  float : left;
  position: relative;
}
.test {
  width: 100%;
  height: 317px;
  background: #f3f3f3 none repeat scroll 0 0;
  box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 3;
  top: 181px;
  left: 0px;
  height: 338px;
  width: 100%;
}

Answer 3

您可以使用网格布局。您可以为屏幕尺寸定义多个宽度：RWD

  

col-lg：大屏幕

     

col-md：中间屏幕

     

col-xs：小屏幕

#upleft {
  width: 34%;
  height: 336px;
  background: red;
  float: left;
  position: relative;
}

#upright {
  width: 33%;
  height: 336px;
  background: blue;
  float: left;
  position: relative;
}

#below {
  height: 337px;
  width: 33%;
  background: green;
  float: right;
  position: relative;
}

.test {
  width: 100%;
  height: 317px;
  background: #f3f3f3 none repeat scroll 0 0;
  box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 3;
  top: 181px;
  left: 0px;
  height: 338px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="test">
  <div id="upleft" class="col-sm-3 col-md-6 col-lg-4">a1</div>
  <div id="upright" class="col-sm-6 col-md-6 col-lg-8">a2</div>
  <div id="below" class="col-sm-9 col-md-6 col-lg-8">a3</div>
</div>