Question

您好我是Html的新手，我想在响应式网站的div中设计div。

更新：我只想在HTML/CSS而不是Javascript或Jquery中使用此设计。

下面的图片可以清楚地说明设计。我无法做到这一点。任何帮助将不胜感激。

enter image description here

提前Thanx：）

Answer 1

你可以实现它，但你可能不得不使用Jquery：

$(window).resize(function(){
    if ( $(window).innerWidth() < 600 ) {
     $(".div1").insertAfter(".divA");  
     $(".div2").insertAfter(".divB");
     $(".right").remove();
    }
});

Answer 2

不完全是你问的问题，但看起来一样。在这里，我将举一些例子。希望它会对你有所帮助。减小宽度，可以看到效果。

<强> HTML

<div id="n1">Div1</div>
<div id="a">DivA</div>
<div id="n1">Div2</div>
<div id="b">DivB</div>
<div id="n1">Div3</div>
<div id="c">DivC</div>

<强> CSS

 #n1, #n2, #n3{
float:left;  
border:1px solid #000;
clear:left;
}
#a, #b, #c
{
float:right;
border:1px solid #000;
clear:right;
}
@media all and (max-width:400px)
{            
   #a, #b, #c
  {
    float:none;
    clear:both;
  }
}

DEMO

Answer 3

HTML / CSS解决方案：

看看this article：解释如何通过css重新排序div顺序。

的Javascript / jQuery的：

你需要的是一个＆＃34;梳子＆＃34;解决方案，合并div内容。

您可以使用此合并功能：

    var merge = function(divA, divB) {
      var $divA = $(divA);
      var $divB = $(divB);
      var d1Num = $divA.children().length;
      var d2Num = $divB.children().length;
      var i = 0;
      for (; i < d1Num; i+=2) { 
        var a = $divA.children().eq(i);
        var b = $divB.children().eq(0);
        b.insertAfter(a);     
      }
      if(d2Num >= d1Num) {
        d2Num = $divB.children().length;
        for (i = 0; i < d2Num; i++) { 
          var a = $divA.children().last();
          var b = $divB.children().eq(0);
          b.insertAfter(a); 
        }
      } else {
         var a = $divA.children().eq(i+1);
         var b = $divB.children().eq(0);
         b.insertAfter(a);     
      }
  }

  merge("#d1", "#d2");

通过这种方式，您的div可以拥有您想要的孩子数量。

<强> DEMO

需要div内部div的响应式设计

3 个答案: