Question

我试图让这些项目显示为水平（一个在另一个旁边），但它们在我的页面上一直显示垂直。它们连接到一个数据库，这就是为什么所有的PHP都在这里。如果不让我知道，这应该是您需要的所有信息。

＆＃13;

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);
}

＆＃13;

  <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>

＆＃13;

Answer 1

为每个项目添加一个填充物，使它们不会碰到，并且每个项目都会向左浮动。他们应该坐在一起。根据您想要的数量，确保它们的宽度合理。

例如：拖车中有两个物品，确保它们的填充/边距/等的总宽度等于它们所含的任何物品的50％以下。如果你有三个物品，请确保它少于33个％等。

如何使这些项目显示为水平而不是垂直

1 个答案: