并排显示CSS框

Question

css code

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

This is CSS code to create boxes

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

It Displays the boxes one below the other How to display the boxes side by side

Answer 1

For side by side div element you need to add

float:left

in your css class will do work for you.

Check example : DIV TABLE

Answer 2

float: left;

这将并排显示框，但是您需要在框之后的项目中添加以下属性才能正确显示。

clear: both;

Answer 3

#folder {display: inline-block;}

或#folder {float: left}

Answer 4

I'd say instead of doing:

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

try:

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

Making sure your < li > tag is closing correctly and wrapping your divs (or contrary, not sure what you're trying)

But your code doesn't seem really clean anyways, for example use class .folder instead of id #folder since ids should be unique by definition.

But i guess you gotta start somewhere, good luck :)

Answer 5

divs are block elements by default.

these elements consume all available width.

Even if you set a width to them, the margin will get the rest.

You can change this behavior by any of these methods:

• setting the display property from display: block to display:inline or display:inline-block
• floating the element with float:left or float:right
• position the div manually with position: absolute