用css 写一个div里面放三个元素,多了换行
时间: 2024-02-18 09:00:32 浏览: 28
可以使用CSS中的flex布局来实现这个需求。具体实现如下:
HTML代码:
```
<div class="container">
<div class="item">元素1</div>
<div class="item">元素2</div>
<div class="item">元素3</div>
<div class="item">元素4</div>
<div class="item">元素5</div>
<div class="item">元素6</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
}
.item {
width: 33.33%; /* 每个元素占据1/3的宽度 */
box-sizing: border-box; /* 边框和内边距不会撑破宽度 */
border: 1px solid #ccc; /* 可以添加边框样式 */
}
```
上面的代码中,我们使用了flex布局,并且设置了`flex-wrap: wrap`,使得当元素超出容器的宽度时会自动换行。同时,每个元素的宽度设置为`33.33%`,即每个元素占据容器的1/3宽度。最后,我们可以通过`border`属性添加元素的边框样式。
相关问题
css flex 布局 每行放三个div
使用CSS flex布局可以实现每行放置三个div的效果。可以参考下面的代码示例:
```css
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: calc(33.33% - 10px);
height: 100px;
margin: 5px;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
```
在上述代码中,我们使用了flex布局,并将容器的flex-wrap属性设置为wrap,这样可以让子元素在一行放不下时自动换行。每个子元素的宽度设置为calc(33.33% - 10px),这样可以保证每行放置三个div,并且有一定的间距。通过调整容器和子元素的样式,可以实现不同的布局效果。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [css布局和定位](https://blog.csdn.net/qq_33302253/article/details/129379353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [css样式布局](https://blog.csdn.net/qq_46239275/article/details/121624615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *3* [flex布局](https://blog.csdn.net/weixin_50903927/article/details/121673086)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]
flex布局固定一行3个元素,超过三个自动换行
可以使用 Flex 布局中的 `flex-wrap` 属性来实现这个效果。具体实现如下:
HTML 代码:
```
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
<div class="item">元素 5</div>
<div class="item">元素 6</div>
<div class="item">元素 7</div>
<div class="item">元素 8</div>
<div class="item">元素 9</div>
</div>
```
CSS 代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}
.item:nth-child(3n) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.item {
width: 100%;
margin-right: 0;
}
}
```
解释:
1. `.container` 使用 `display: flex` 属性使其成为 Flex 容器。
2. `.container` 使用 `flex-wrap: wrap` 属性将超出行宽的元素自动换行。
3. `.item` 使用 `width: calc(33.33% - 10px)` 属性将其宽度设为 33.33%,并减去 10px 的右边距,保证三个元素占满一行。
4. `.item:nth-child(3n)` 使用 `margin-right: 0` 属性将第三个元素的右边距设置为 0,使其占满一行。
5. 使用媒体查询(`@media`)和 `width: 100%` 属性,当屏幕宽度小于 768px 时,将每个元素的宽度设置为 100%,让它们在一行内排列。