3行3列自适应css代码
时间: 2023-12-10 13:42:05 浏览: 32
以下是一个简单的3行3列自适应CSS代码示例:
HTML代码:
```
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
```
CSS代码:
```
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 10px;
text-align: center;
}
```
这个CSS代码会将包含9个项目的容器分成3行3列的网格布局,并且会根据屏幕大小自动调整每个项目的大小。每个项目之间有10像素的间隔。
相关问题
css图片自适应块代码
以下是一种CSS实现图片自适应块的代码:
```css
.img-container {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
position: relative;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
```
在这个代码中,我们创建了一个 `.img-container` 容器,它的高度为0,但是使用 `padding-bottom` 属性来设置一个占位符高度,这个高度基于16:9的宽高比。
然后,我们将图片使用 `position: absolute` 定位到容器的顶部和左侧,并使用 `width` 和 `height` 设置图片的大小为100%。最后,使用 `object-fit: cover` 属性来缩放图片以填充整个容器,同时保持比例。
表格自适应css
要让表格自适应页面大小,可以使用CSS中的一些属性和技巧:
1. 使用百分比宽度:将表格的宽度设置为百分比,如width: 100%;。这样表格会根据父元素的宽度自适应。
2. 使用max-width属性:将表格的宽度设置为最大宽度,如max-width: 100%;。这样表格会根据父元素的宽度自适应,但不会超过设定的最大宽度。
3. 使用表格布局:将表格的布局设置为table-layout: fixed;,这样表格会根据单元格内容自适应宽度。
4. 使用媒体查询:根据不同屏幕尺寸设置不同的样式,如在小屏幕下将表格宽度设置为100%。
示例代码:
```
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
}
@media only screen and (max-width: 768px) {
table {
width: 100%;
}
}
```