Why doesn't display:inline-block work for my HTML? - php

Question

The display: inline-block technique to make div elements appear next to each other does not work with my dynamically-generated content cards.
My content cards are a modified version of a tutorial found on the w3schools website, which can be found here:
https://www.w3schools.com/howto/howto_css_cards.asp
Goal
I'm in the process of creating a relatively simple search engine for my website based on a query that checks a MySQL database for any potential matches. The results are returned in the form of a content card. If the system finds 3 matches, 3 content cards will be generated in the results. The code is being controlled by a for-loop (PHP) that generates a content card for each match found.
Problem
The corresponding content cards are generated for each match, however, they appear on separate lines below each other (vertically). I attempted to use the display: inline-block technique to force them next to each other with no results. I suspect the reason why is because the code for each content card must already be there for the effect to take place. If not, CSS & HTML assume that there was only ever one content card and doesn't align them properly.
HTML/CSS/PHP Code for Content Cards
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
width: 30%;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 20%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
.shrink {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
<!-- Container -->
<div class="container" style="background-color: white; width:89%; padding-top: 400px;">
<!-- Generates 1 Content Card for each Match -->
<?php
for($x = 0; $x < count($title); $x++) {
?>
<!-- Content Card Design & Data -->
<div class="shrink">
<div class="card" style="background-color: white; border-radius: 2%; display: inline-block;">
<a href="#" data-toggle="modal" data-target="#ModalCarousel<?php echo " $x ";?>" style="text-decoration: none; color: black;">
<img src="listingimages/<?php echo "$firstListingImage[$x]";?>" style="width:100%; border-top-left-radius: 2%; border-top-right-radius: 2%;">
<h4><?php echo "$title[$x]";?></h4>
<hr>
<p><span class = "glyphicon glyphicon-cutlery"></span> <?php echo "$foodType[$x]";?></p>
<hr>
<p><span class = "glyphicon glyphicon-map-marker"></span> <?php echo "$city[$x]";?>, <?php echo "$state[$x]";?></p>
<hr>
<p style="font-size: 30px;"><b>$<?php echo "$price[$x]";?></b><span style="font-size: 15px;"> USD</span></p>
</a>
</div>
</div>
<?php } ?>
</div>

Answer 1

It is very easy just you need to add in the class .card {float:left} then it will work as you want

Answer 2

With inline-block for it to work you must also set a fixed width on .shrink, which is the repeated holder, and maybe vertical-align
The preferred way nowadays is by setting display:flex; flex-wrap:wrap on the container which is made just for this kind of box display. Also set width on .shrink with this solution.

Answer 3

Your .cards are nicely displayed as inline-blocks, but they're each wrapped inside a .shrink which are full blocks. That's why they're not lining up as you'd expect.