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

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

这很简单，你只需要在类中添加 .card {float:left} 然后它就会如你所愿

Answer 2

1. 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
2. The preferred way nowadays is by setting display:flex; flex-wrap:wrap 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 .card s 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.