并排显示CSS框

时间:2013-02-20 05:43:37

标签: php javascript html css

css代码

 #folder {  
width: 105px;
background: #BABABA;
position: relative;
 -moz-border-radius:    10px;
-webkit-border-radius: 10px;
border-radius: 0px 10px 10px 10px;
}

这是用于创建方框的CSS代码

php code

<link rel="stylesheet" type="text/css" href="fold.css" /></style>
<?php 
function listFolderFiles($dir,$exclude){ 
 $ffs = scandir($dir); 
echo '<ul class="ulli">'; 
foreach($ffs as $ff){ 
    if(is_array($exclude) and !in_array($ff,$exclude)){ 
        if($ff != '.' && $ff != '..'){ 
        if(!is_dir($dir.'/'.$ff)){ 

        } else { 
        echo '<div class=wrap><div id=folder><li>'.$ff.'</div></div>';    
        } 
        if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff,$exclude); 
        echo '</li>'; 
        } 
    } 
} 
echo '</ul>'; 
} 

listFolderFiles('.',array('index.php','edit_page.php')); 
?>

它显示一个在另一个下面的框 如何并排显示框

5 个答案:

答案 0 :(得分:1)

对于并排div元素,您需要添加

float:left
你的css课程中的

会为你效劳。

检查示例:DIV TABLE

答案 1 :(得分:0)

float: left;

这将并排显示框,但您需要将以下属性添加到框后面的项目才能正确显示。

clear: both;

答案 2 :(得分:0)

#folder {display: inline-block;}

#folder {float: left}

答案 3 :(得分:0)

我会说而不是做:

echo '<div class=wrap><div id=folder><li>'.$ff.'</div></div>';    

尝试:

echo '<li><div class=wrap><div id=folder>'.$ff.'</div></div></li>';    

确保您的< li >代码正确关闭并包裹divs(或相反,不确定您要尝试的内容)

但是你的代码似乎并不干净,例如使用类.folder而不是id #folder,因为根据定义,ids应该是唯一的。

但我想你必须从某个地方开始,祝你好运:)

答案 4 :(得分:0)

默认情况下,div是块元素。

这些元素消耗所有可用宽度。

即使您为它们设置宽度,余量也会得到余下的。

您可以通过以下任何方法更改此行为:

  • 将display属性从display:block设置为display:inline或 显示:直列块
  • 使用float浮动元素:left或float:right
  • 使用position:absolute
  • 手动定位div