Wie stelle ich diese Elemente horizontal statt vertikal dar?

Question

Ich versuche, diese Elemente horizontal (eine direkt neben der anderen) anzuzeigen, aber sie werden vertikal auf meiner Seite angezeigt. Sie sind mit einer Datenbank verbunden, weshalb das ganze PHP hier ist. Dies sollte alles sein, was Sie brauchen, wenn Sie mich nicht wissen lassen.

body { 
 
    font: normal 16px/1.5 Arial, sans-serif; 
 
} 
 

 
h1, p { 
 
    margin: 0; 
 
    padding-bottom: 5px; 
 
    padding-left:5%; 
 

 
} 
 

 
.inline { 
 
    max-width: 25%; 
 
    display:inline; 
 
} 
 

 
.caption { 
 
    overflow: hidden; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
} 
 

 
.caption::before { 
 
    content: ' '; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: transparent; 
 
    transition: background .35s ease-out; 
 
} 
 

 
.caption:hover::before { 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 

 
.caption__media { 
 
    max-width: 25%; 
 

 
} 
 

 
.caption__overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 10px; 
 
    color: white; 
 
    -webkit-transform: translateY(100%); 
 
      transform: translateY(100%); 
 

 
    transition: -webkit-transform .35s ease-out; 
 
    transition:   transform .35s ease-out; 
 
} 
 

 
.caption:hover .caption__overlay { 
 
    -webkit-transform: translateY(0); 
 
      transform: translateY(0); 
 
} 
 

 
.caption__overlay__title { 
 
    -webkit-transform: translateY(-webkit-calc(-100% - 10px)); 
 
      transform: translateY(calc(-100% - 10px)); 
 

 
    transition: -webkit-transform .35s ease-out; 
 
    transition:   transform .35s ease-out; 
 
} 
 

 
.caption:hover .caption__overlay__title { 
 
    -webkit-transform: translateY(0); 
 
      transform: translateY(0); 
 
}

<div class="content"> 
 
<div class="inline"> 
 
    <div class="caption"> 
 
    
 
    <img src="<?php echo $row["image"]; ?>" class="caption__media"> 
 
     <div class="caption__overlay"> 
 
      <h5 class="caption__overlay__title"><?php echo $row["p_name"]; ?></h5> 
 
      <p class="caption__overlay__content"> 
 

 
      <form class="addToCart" action="index.php?action=add&id=<?php echo $row["id"]; ?>" method="post"> 
 

 
     
 
      <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5> 
 
      <input type="hidden" name="quantity" class="form-control" value="1"> 
 
      <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>"> 
 
      <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>"> 
 

 

 
<button class="add">Add to cart 
 
      <input type="hidden" name="add" id="submit"></button></form></p></div></div></div></div> 
 

Answer 1

jedes der Elemente geben eine Polsterung, so dass sie sich nicht berühren, und sie jeweils links schweben. Sie sollten nebeneinander sitzen. Stellen Sie sicher, dass ihre Breite angemessen ist, je nachdem, wie viele Zeilen hintereinander gewünscht sind.

Zum Beispiel: Haben zwei Gegenstände in einem Werg, stellen Sie sicher, dass ihre Gesamtbreite mit Polsterung/Rand/etc gleich sind weniger als 50% von was auch immer sie enthalten sind. Wenn Sie drei Elemente haben, stellen Sie sicher, dass es weniger ist 33% usw.