如何将此动态列表拆分为3列?

时间:2015-08-19 15:38:25

标签: php html css multiple-columns

我正在使用较旧的网络应用程序,除了将所有内容重写为现代标准之外,我还尝试尽可能简化修改。

如下所示,我有一个动态创建的目录列表。代码有效,但我无法找出将列表拆分为3列的最佳方法。我只能在IE9中使用此功能(如果它可以在任何其他浏览器上运行,只是一个加号)。我知道,嵌套的表格很乱,但是这个东西是如何构建的,我只是想把它修改为动态目录列表(带有几个复选框)。

是否有一些PHP会这样做?或者是否有一些CSS技术可以工作?我对过去的爆炸工作有点失落。

           <table width="100%"  border="1" cellpadding="0" cellspacing="0" bordercolor="#808080">
          <tr>
          <td>
        <table width="100%" border=0 cellpadding=0 cellspacing=0>
          <tr align="center" bgcolor="#000000">
            <td valign=bottom class="style6 Normal"><strong>Watertown Network Shared Directory Access<br>
            Applies to &quot;P&quot; drive permissions - <br>
              By Default all users have at <em>least</em> &quot;read-only&quot; access to all folders/files on the &quot;S&quot; drive. </strong></td>
          </tr>
          <tr>
            <td align="left"><table width="100%" border="0">
                <?php
                //$path = '\\\\wttfs001\\private';
                $path = '\\\\wttfs001\\shared';
                $directories = scandir($path);

                echo '<ul>';
                foreach ($directories as $directory){
                    if ($directory === '.' or $directory === '..') {
                            continue;
                        }
                    if(is_dir($path . '/' . $directory)){
                    echo '<input type="checkbox" name="read[]" value="' . $directory . '" />R';
                    echo '<input type="checkbox" name="write[]" value="' . $directory . '" />W';
                    echo ' ' . $directory . '<br>';
                    }
                }
                echo '</ul>';?>
            </table></td>
          </tr>
        </table>

2 个答案:

答案 0 :(得分:0)

它将取决于你希望它们如何流动。

我在循环中看不到的是任何<li>标记。我会按如下方式修改你的循环:

foreach ($directories as $directory){
  if ($directory === '.' or $directory === '..') { continue;  }
  if (is_dir($path . '/' . $directory)){
    echo '<li><input type="checkbox" name="read[]" value="' . $directory . '" />R</li>';
    echo '<li><input type="checkbox" name="write[]" value="' . $directory . '" />W</li>';
    echo '<li>' . $directory . '</li>';
  }
}

现在,你有标记可以玩。从那里,您可以应用样式来调整行或列,给定类似的标记结构:

<强> HTML

<ul class="dir-1">
  <li><input type="checkbox" name="read[]">R</li>   
  <li><input type="checkbox" name="write[]">W</li>
  <li>dir-1</li>
</ul>
<ul class="dir-2">
  <li><input type="checkbox" name="read[]">R</li>   
  <li><input type="checkbox" name="write[]">W</li>
  <li>dir-2</li>
</ul>

<强> CSS

ul[class^="dir-"], 
ul[class*=" dir-"] {
  padding: 0;
  margin: 0;
  clear: both;
}
ul[class^="dir-"] li, 
ul[class*=" dir-"] li {
  display: inline-block;
  width: 32%;
  float: left;
  margin-right: 1%;
}

http://codepen.io/anon/pen/aOgOdg

答案 1 :(得分:0)

以上内容很有帮助,我指出了一个关于CSS的方向....发现答案如此简单我无法相信我在这方面做了太多努力。

            <?php
                //$path = '\\\\wttfs001\\private';
                $path = '\\\\wttfs001\\shared';
                $directories = scandir($path);
                echo '<ul class="fred">';
                foreach ($directories as $directory){
                    if ($directory === '.' or $directory === '..') {
                            continue;
                        }
                    if(is_dir($path . '/' . $directory)){
                    echo '<li class="wilma"><input type="checkbox" name="chkRead[]" value="' . $directory . '" />R</li>';
                    echo '<li class="wilma"><input type="checkbox" name="chkWrite[]" value="' . $directory . '" />W</li>';
                    echo '<li class="directory">'  . $directory .  '</li>';
                    }
                }
                echo '</ul>';
                ?>

我按照上面提到的li标签,给了他们两个不同的课程。 1表示复选框,1表示目录列表。

对于我使用的CSS:

li.wilma{
display: inline-block;
padding-left: .2em;
padding-bottom: .25em;
padding-top: .25em;
}

li.directory{
display: inline-block;
width: 15%;
padding-right: 1em;
padding-left: 2em;
padding-bottom: .25em;
padding-top: .25em;
}

按原样,到目前为止,我正在寻找的是使用复选框格式化动态创建的目录列表。老实说,我不知道是否所有填充都是必要的,CSS对我来说是如此神秘,但我现在看起来很漂亮。