我正在尝试使用 PHP 和 Javascript 在 HTML5 和 CSS3 中制作一个网页。每行应包含 4 列。
这是我的代码：
<div class="row">
<?php echo "<img src='assets/img/termekek/$image.png' class='column'
>";?>
和 CSS
.row{
display:flex;
}
.column{
flex:33.33%;
padding:5px
}
但这并没有达到预期的结果。
有人可以帮助我吗？
我认为您只是缺少一个包含行和列的容器。容器需要有display:flex和flex-direction。
下面是一个示例：
<body>
<div class="container">
<div class="row">
<div class="column">
</div>
</div>
<div class="row">
<div class="column">
</div>
</div>
<div class="row">
<div class="column">
</div>
</div>
</div>
</body>
CSS将是：
.container {
display: flex;
flex-direction: column;
height: 100px;
width: 100%;
}
.row {
display: flex;
flex: 1,
flex-direction: row;
border: 1px solid black;
height: inherit;
width: inherit;
}
.column {
flex: 1;
border: 1px solid orange;
}
请忽略边框、高度和宽度属性。它们用于更好地可视化网页上的元素
以上将生成一个包含三行的容器。现在，如果在<div class="row">中添加三个<div class="column">，则每行将包含四列。
还有另一种方法可以获得相同的模式，它涉及在.row和.container之间交换柔性方向。但是，它将成为一列行而不是一行列。只是创建元素时要考虑的一个小细节。
顺便说一下，我习惯了使用flex，遵循本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。看看并玩弄它！
祝您编码愉快！ :)