schwimmend ein div in die linke

Question

wollen einfach alle meine div der Liste machen wie diese

nach links zu schweben gerade eine harte Zeit, und frage mich, wo ich falsch es ging, tat ich setzte eine falsche Abteilung oder etwas

mein css

.list_wrapper{ 
width:200px; 
background-color:red; 
display:block;} 



.list_wrapper2{ 
width:900px; 
background-color:blue; 
float:left; 
} 

Meine html

<div class = "list_wrapper2" > 
<h3><?php echo $letter?></h3> 

<?php foreach($pages as $page): ?> 
      <div class = "list_wrapper" > 
      <ul> 
       <li class="listcss"> 
       <a href="<?php echo BASE_URL;?>/page.php?page=<?php echo e($page['slug']);?>"><?php echo e($page['label']);?></a> 
       </li> 
      </ul> 
      </div> 
<?php endforeach; ?> 
<?php endfor; ?> 
</div> 

Answer 1

Versuchen Sie display: inline-block anstelle von float: left. Hier ist ein Beispiel, um loszulegen.

Hinweis:float wird die div in die nächste Zeile bei Überlauf wickeln!

.wrapper { 
 
    overflow: scroll; 
 
    white-space: nowrap; 
 
} 
 
.wrapper > div { 
 
    display: inline-block; 
 
    min-width: 50px; 
 
    min-height: 50px; 
 
    background-color: cornflowerblue; 
 
}

<div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
</div>

Answer 2

enthält Ihr Code Beispiel zu viel irrelevante Informationen. Um das gewünschte Ergebnis zu erzielen, fügen Sie einfach eine Klasse mit float: left zu jedem Div hinzu.

.floating-left{ 
 
    float: left; 
 
    width: 100px; 
 
    height: 40px; 
 
    border: 2px solid black; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
}

<div class="floating-left"></div> 
 
<div class="floating-left"></div> 
 
<div class="floating-left"></div> 
 
<div class="floating-left"></div> 
 
<div class="floating-left"></div> 
 
<div class="floating-left"></div>

Answer 3

.list_wrapper2 

Breite ist zu groß, es sei denn, Sie Körperbreite ist wie 3000px sind. Reduzieren Sie die Breite auf etwa 200px und sie sollten richtig schweben.

Answer 4

versuchen Breite Eigenschaft entfernen, weil zwei divs 1800px Breite benötigt, so können sie nicht nach links voneinander