CSS Inline-Block kann den gewünschten Effekt nicht erzeugen

Question

Ich versuche ein Gitter aus Boxen zu erstellen, das die Browserbreite ausfüllt und mit dem display: inline-block Paar/Wert gut umschließt. Ich bin ein Neuling, aber auf jeden Fall bekomme ich nicht den gewünschten Effekt. Unten ist mein Code, bitte helfen:

.ifieds{ 
 
    display: inline-block; 
 
    width: 660px; 
 
} 
 

 
.classbox1{ 
 
    width:361px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox1 > p{ 
 
    margin: auto; 
 
} 
 

 
.classbox2{ 
 
    width:660px; 
 
    height:283px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox3{ 
 
    width:359px; 
 
    height:279px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox4{ 
 
    width:459px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
} 
 

 
.classbox5{ 
 
    width:361px; 
 
    height:282px; 
 
    border-radius: 5px; 
 
    background-image: url(); 
 
    background-color:#CEB5A1; 
 
    margin-bottom: 15px; 
 
}

<!--html codes--> 
 
<div class="ifieds"> 
 
    <div class="classbox1">Jobs</div> 
 
    <div class="classbox2">Cars and Vehicle</div> 
 
    <div class="classbox3">Apartment Rental</div> 
 
    <div class="classbox4">Houses for Sale</div> 
 
    <div class="classbox5">Pro Services</div> 
 
</div>

Answer 1

Appart als die display, Sie‘ Ich muss die width Werte anpassen.

Zunächst einmal, empfehle ich Ihnen, die alle gemeinsamen Attribute zusammen in der gleichen Descriptor setzen:

.ifieds div { 
    height: 282px; 
    border-radius: 5px; 
    background-color: #CEB5A1; 
    margin-bottom: 15px; 
    margin-left: 5px; 
} 

Wenn Sie das Raster wollen die alle Browser-Breite zu verbreiten entlang:

.ifieds { 
    width: 100%; 
} 

Und Wenn Sie möchten, dass die Blöcke einander benachbart sind:

.ifieds div { 
    ... 
    display: inline-block; 
} 

Dann verteilen Sie alle Ava ilable Breite zwischen den Zellen, so dass sie zu 100% summieren:

.classbox1{ 
    background-image: url(https://optometryadmissions.files.wordpress.com/2013/10/istock_000019402859xsmall.jpg); 
    width:16%; 
} 

.classbox2{ 
    width: 25%; 
} 

.classbox3{ 
    width: 15%; 
} 

... 

Wenn Sie immer Prozentgrößen verwenden (was eine gute Praxis in Web-Design ist), auch wenn der Browser der Größe verändert wird, werden die relativen Breiten werden bleiben dieselben (mit einigen exterme Grenzen: wenn der Browser zu sehr geschrumpft wird, werden die inneren Texte nicht passen, und die Blöcke werden sich auf mehrere Linien ausbreiten. Machen Sie eine komplette Reihe von Tests).

Answer 2

Sie müssen auf jedem .classboxX Element display: inline-block; setzen, nicht ihre Eltern div:

.ifieds > div { 
    display: inline-block; 
}