html - CSS 不等 div 框

问题描述

我有个问题。我试图div foreach在我的数据库中显示一行。现在这是我现在拥有的 html 代码：

<div class="column middle">
    <table>

    <?php

        $row_count = $result->num_rows;
        $i = 0;

        while($row = mysqli_fetch_assoc($result))
        {
            if ($i == 0 or $i == 2)
            {
                echo "<tr>";
            }
            echo "<td>";
            echo "<div class='list_column'>
                      <form method='post' action='producten.php'>
                      <input type='hidden' name='restaurant_id' value=".$row['id']." />
                      <div class='foto'><img src='".$row['picture']."' style='width: 100%; height: 25%;'/></div>
                      <div class='name'>".$row['name']."</div>
                      <button type='submit' class='order'>Bestellen</button>
                      </form>
                      </div>";
            echo "</td>";
            
            $i += 1;
            
            if ($i == 2)
            {
                $i = 0;
                echo "</tr>";
            }
        }
    ?>

    </table>
</div>

这是CSS：

.column.middle {
  width: 60%;
}
.list_column {
    float:left;
    padding: 10px;
    text-align: center; 
    width:50%;
}
.list_column:hover {
    box-shadow: 0 0 0 2px #e5e5e5;
    cursor:pointer;
    }
.list_column .name {
    font-weight:bold;
    }
.list_column .order {
    text-transform: uppercase;
    background: #F68B1E;
    border: 1px solid #F68B1E;
    cursor: pointer;
    color: #fff;
    padding: 8px;
    margin-top: 10px;
}
.list_column .order:hover {
    background: #f17e0a;
    border-color: #f17e0a;
}

现在这是我目前的结果：

如您所见，divs大小不相等。我想要的是图像中的图像divs是正方形并且 div 的大小list_column彼此相等，即使图像不是正方形和相等的也是如此。

我怎样才能做到这一点？

标签： htmlcss

html - CSS 不等 div 框

问题描述

解决方案

推荐阅读