Question

@All：

我想创建一个两个div的响应结构，每个div又包含两个div，如下图所示。

Divs During normal view

一旦响应相同，结构应如下所示：

Responsive View of the Divs

请指导我实现同样的目标。

Answer 1

你可以尝试这样的事情

 <body>
    <div class="container">
        <div class="big">
            <div class="small"></div>
             <div class="small"></div>
        </div>
        <div class="big">
             <div class="small"></div>
              <div class="small"></div>
        </div>
    </div>

和风格

.container{
            width:600px;
            margin: 0 auto;
        }
        .big{
            width: 250px;
            height: 250px;
            border: 2px solid #000;
            float: left;
            margin: 20px;
        }
        .small{
            width: 100px;
            height: 100px;
            float: left;
            margin: 0 auto;
            border: 2px solid red;
        }

        @media(max-width:597px)
        {
            .container{
                width: 300px;
            }
        }

Answer 2

有很多方法可以做到这一点。最简单的方法之一是使用display: inline-block。然后，内容将自动换行以适合浏览器的宽度。尝试运行此代码段，点击＆＃34;整页＆＃34;，然后调整浏览器大小。

＆＃13;

div {
  display:inline-block;
  border:3px solid black;
  width:300px;
  height:150px;
  padding:4px;
  margin: 0 0 10px;
}
div div {
  border-color: red;
  width:134px;
  height:136px;
}

＆＃13;

<div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
</div>

＆＃13;

Answer 3

试试这个HTML

 <div id="conatiner">
    <div id="div1">
      <div id="div11"></div>
      <div id="div12"></div>
    </div>
    <div id="div2">
      <div id="div21"></div>
      <div id="div22"></div>
   </div>
 </div>

和css是

 #div1, #div2 {
   width:45%;
   min-width:200px;
   margin:1%;
   float:left;
   border: 1px solid black;
   }

 #div11, #div12, #div21, #div22 {
   display:inline-block;
   width:45%;
   min-width:50px;  // this width should 1/4th of the min-width of div1 and div2
   margin:1%;
   height:100px;
   border: 1px solid black;
   }

这里js fiddle http://jsfiddle.net/90knutoc/9/

2个div，每个包含2个div并且响应迅速

3 个答案: