动态DIV布局？

我想解决如何动态布局DIV，以便它们形成网格效果布局。动态DIV布局？

我的页面非常简单。我有一个DIV这是一个包装，并使用由：

#wrapper { 
    width: 80%; 
    margin: 50px auto; 
    padding: 20px; 
    border:1px solid #000000; 
    display: table; 
    }

下面是这个页面工作的FIDDLE。

其中我想布局6个单元格（可能是8个，但是对于这6个将会很好）单元格使用父级&子级CSS显示。

用户权限确定他们可以看到多少个单元格。所以有些用户会看到6，其他5,4,3等。

附上的屏幕快照显示了我希望布局根据显示的单元格数量来查看。（所有正确居中 - 不像我的形象）

enter image description here

，细胞的文字输入并不重要，一些用户会看到2个细胞，这可能是“字段1” &“字段6”，另一用户也可能是“字段5” &“字段2”使用

<div class="child"> 
     <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png' /> 
     <p>field 1</p> 
    </a> 
    </div>

PHP将被用来隐藏该不被观看的任何细胞上面的代码中创建等

的细胞。

任何想法如何实现这一目标？

感谢

来源

2015-03-25 JeffVader

你说你生成PHP代码，以便只需添加一个if该决定需要哪种布局。如果您只需要4个div，则每个父div只能生成两个子div。

当我从HTML代码中删除div时，您的HTML和CSS似乎工作得很好。

如果您可以通过PHP代码轻松完成此操作，我不会看到让您的CSS复杂化的原因。简单和干净的HTML和CSS将被加载和渲染得更快，而且更容易维护。

来源

2015-03-25 09:53:19

如果你删除第一行一个div然后顶行与2周的div结束。我认为要求是不管删除div位置，都有相同的大纲。 – Sushovan 2015-03-25 09:59:56

如果您有权访问PHP代码，我认为使用它生成一个简单的干净代码是更好的解决方案，而不是使CSS代码复杂化。 – 2015-03-25 10:14:36

您可以使用CSS3 flex属性和java脚本解决问题。在HTML文件中，您只需将所有六个子元素[div.child]放置在父[div＃parent]内。子元素的分裂可以使用JavaScript本身完成。

入住这下面的代码：

<!doctype HTML> 
    <html> 
     <head> 
      <style> 
       #wrapper { 
        width: 80%; 
        margin: 50px auto; 
        padding: 20px; 
        border:1px solid #000000; 
        display:block; 
       } 
       #parent { 
        display: flex; 
        font-size: 1em; 
        height: auto; 
        justify-content: space-around; 
        line-height: 0.6em; 
        margin: 0 0 30px; 
        text-align:center; 
       } 
       .child { 
        width: 120px; 
        height: 75px; 
        border: solid 1px #000; 
        display: inline-block; 
        letter-spacing: normal; 
        font-size: normal; 
        white-space: normal; 
        text-align: center; 
        vertical-align: middle; 
        margin:5px 25px 20px 25px; 
       } 
      </style> 
     </head> 
     <body> 
      <div id="wrapper"> 
       <div id="parent"> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 1</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 2</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 3</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 4</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 5</p> 
         </a> 
        </div> 
        <div class="child"> 
         <a href=""> 
          <img src='http://www.emojibase.com/resources/img/emojis/gemoji/274c.png'/> 
          <p>field 6</p> 
         </a> 
        </div> 
       </div> 
      </div> 
     </body> 
    </html> 
<script> 
    var wrapper= document.getElementById('wrapper'); 
    var temp= document.getElementById('parent'); 
    child= temp.childElementCount; 
    if(child == 3) 
    { 
     temp.style.flexFlow= "row nowrap"; 
    } 
    if(child == 4) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2 = document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child3= temp.childNodes[5]; 
     var child4= temp.childNodes[7]; 
     row2.appendChild(child3); 
     row2.appendChild(child4); 
     wrapper.appendChild(row2); 
    } 
    if(child == 5) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2 = document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child4= temp.childNodes[7]; 
     var child5= temp.childNodes[9]; 
     row2.appendChild(child4); 
     row2.appendChild(child5); 
     wrapper.appendChild(row2); 
    } 
    if(child == 6) 
    { 
     temp.style.flexFlow="row nowrap"; 
     var row2= document.createElement("div"); 
     row2.setAttribute('id','parent'); 
     var child4= temp.childNodes[7]; 
     var child5= temp.childNodes[9]; 
     var child6= temp.childNodes[11]; 
     row2.appendChild(child4); 
     row2.appendChild(child5); 
     row2.appendChild(child6); 
     wrapper.appendChild(row2); 
    } 
</script>

来源

2015-03-25 10:05:05 idzignr

动态DIV布局？

回答

相关问题