並排顯示CSS框

Question

CSS代碼

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

這是創建框的CSS代碼

PHP代碼

<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')); 
?>

它在另一個下方顯示框。如何並排顯示框

Answer 1

對於並排div元素，您需要添加

float:left

在您的css類中會為您工作。

查看示例： DIV TABLE

Answer 2

float: left;

這將並排顯示框，但是您需要在框之后的項目中添加以下屬性才能正確顯示。

clear: both;

Answer 3

#folder {display: inline-block;}

或#folder {float: left}

Answer 4

我會說而不是做：

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 （或者相反，不確定您要嘗試的內容）

但是您的代碼看起來還是不太干凈，例如使用class .folder而不是id #folder因為id在定義上應該是唯一的。

但是我想你得從某個地方開始，祝你好運:)

Answer 5

divs默認是塊元素。

這些元素消耗所有可用寬度。

即使您為它們設置了寬度，邊距也會得到其余部分。

您可以通過以下任何一種方法來更改此行為：

• 從display：block設置display屬性，設置為display：inline或display：inline-block
• 用float：left或float：right浮動元素
• 手動將div的位置設置為：absolute