动态 DIV 布局？答案

【问题标题】：Dynamic DIV Layout?动态 DIV 布局？
【发布时间】：2015-05-28 21:43:29
【问题描述】：

我正在尝试研究如何动态布局 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 等等。

附加的屏幕截图显示了我希望布局的外观基于显示的单元格数量。（全部居中正确 - 与我的图像不同）

单元格的文本输入并不重要，一些用户会看到 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 将用于隐藏任何不被查看的单元格的上述代码。

知道如何实现这一点吗？

谢谢

【问题讨论】：

标签： php html css layout

【解决方案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>

【讨论】：

【解决方案2】：

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

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

如果您可以通过 PHP 代码轻松解决此问题，我认为没有理由让您的 CSS 复杂化。简单干净的 HTML 和 CSS 将更快地加载和呈现，也更容易维护。

【讨论】：

如果你从第一行删除一个 div，那么第一行会以 2 个 div 结束。我认为要求是无论删除的 div 位置如何，都具有相同的轮廓。
如果您可以访问 PHP 代码，我认为用它生成一个简单干净的代码是更好的解决方案，而不是使 CSS 代码复杂化。