Question

我正在尝试研究如何动态布局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”和“字段1”。 “字段6”，另一个用户可以是“字段5”和“字段5”。 'field 2'等。

使用

创建单元格

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

php将用于隐藏任何不被查看的单元格的上述代码。

知道如何实现这个目标吗？

由于

Answer 1

您可以使用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>

Answer 2

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

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

如果您可以通过PHP代码轻松解决问题，我就没有理由让您的CSS复杂化。简单而干净的HTML和CSS将被加载和渲染得更快，也更容易维护。

动态DIV布局？

2 个答案: