用网格布局实现3列4行
时间: 2024-03-31 18:37:06 浏览: 14
可以使用网格布局的`grid-template-columns`和`grid-template-rows`属性来实现,其中`grid-template-columns`定义列的数量和宽度,`grid-template-rows`定义行的数量和高度。
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列,每列1份 */
grid-template-rows: repeat(4, 1fr); /* 4行,每行1份 */
}
/* 可选样式 */
.container > * {
border: 1px solid black;
}
```
在HTML中,只需要在`.container`中添加12个子元素即可自动排列成3列4行的布局。
```html
<div class="container">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>
</div>
```
效果如下图所示:
![grid-layout](https://i.imgur.com/9hT4S5N.png)
相关问题
用网格布局实现一行3个一列4个
可以使用网格布局的`grid-template-columns`和`grid-template-rows`属性来实现,其中`grid-template-columns`定义列的数量和宽度,`grid-template-rows`定义行的数量和高度。
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列,每列1份 */
grid-template-rows: repeat(4, 1fr); /* 4行,每行1份 */
}
/* 可选样式 */
.container > * {
border: 1px solid black;
}
```
在HTML中,只需要在`.container`中添加12个子元素即可自动排列成3列4行的布局。
```html
<div class="container">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
<div>10</div><div>11</div><div>12</div>
</div>
```
效果如下图所示:
![grid-layout](https://i.imgur.com/9hT4S5N.png)
用Java设计一个有6行1列网格布局的顶层容器
好的,以下是使用Java代码实现一个有6行1列网格布局的顶层容器的示例:
```java
import javax.swing.*;
public class GridExample extends JFrame {
public GridExample() {
// 设置窗口标题
setTitle("6行1列网格布局");
// 创建6个标签
JLabel label1 = new JLabel("Label 1");
JLabel label2 = new JLabel("Label 2");
JLabel label3 = new JLabel("Label 3");
JLabel label4 = new JLabel("Label 4");
JLabel label5 = new JLabel("Label 5");
JLabel label6 = new JLabel("Label 6");
// 创建一个6行1列的网格布局
setLayout(new GridLayout(6, 1));
// 将标签添加到容器中
add(label1);
add(label2);
add(label3);
add(label4);
add(label5);
add(label6);
// 设置窗口大小并显示
setSize(300, 200);
setVisible(true);
}
public static void main(String[] args) {
// 创建并显示窗口
new GridExample();
}
}
```
运行以上代码,即可看到一个包含6个标签的窗口,这6个标签以6行1列的网格布局排列。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)