使两张图片的弹性布局一个位于页面顶部一个位于页面底部
时间: 2023-08-25 11:34:14 浏览: 47
可以使用 Flex 布局来实现两张图片的弹性布局,并让一个位于页面顶部,一个位于页面底部。以下是一个示例:
HTML 代码:
```
<div class="container">
<img src="image1.jpg" alt="图片1"/>
<img src="image2.jpg" alt="图片2"/>
</div>
```
CSS 代码:
```
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.container img {
flex: 1;
width: 100%;
object-fit: cover;
}
```
上述代码将一个 class 为 container 的 div 元素设置为 Flex 容器,并将其子元素按照垂直方向排列。`justify-content: space-between` 属性将两个子元素分别放置在容器的顶部和底部。
每个子元素都是一个图片,使用了 `flex: 1;` 属性,表示它们会平分剩余的空间,因此两张图片的高度会根据容器的高度自动调整。`width: 100%;` 属性将图片的宽度设置为容器的宽度,`object-fit: cover;` 属性可以保证图片不变形,同时填满整个容器。
这样,就可以实现两张图片的弹性布局,并让一个位于页面顶部,一个位于页面底部。
相关问题
html如何实现缩短页面间距,使两张并列的图片变成一列
您可以使用CSS中的margin属性和display属性来实现缩短页面间距和使两张并列的图片变成一列的效果。
具体方法如下:
1. 首先,在两张并列的图片的外层容器中添加一个类名,比如说class="img-container"。
2. 然后,在CSS中为这个class添加样式:
```
.img-container {
display: flex;
flex-direction: column;
}
.img-container img {
margin-bottom: 10px; /* 设置图片之间的间距 */
}
```
解释一下上面的代码:
- display: flex;这一行代码将容器的布局方式设置为弹性布局,这样可以让两张图片变成一列。
- flex-direction: column;这一行代码将弹性布局的方向设置为垂直方向,这样图片会垂直排列。
- img-container img这一部分代码是为图片添加样式,margin-bottom: 10px;这一行代码设置了图片之间的间距为10个像素。
通过以上的代码,您可以实现缩短页面间距,使两张并列的图片变成一列的效果。
给一个盒子设置弹性布局横向两排纵向两列
可以使用以下代码来实现:
```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>
```
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height: 400px;
}
.item {
width: 200px;
height: 150px;
background-color: #ccc;
margin-bottom: 20px;
}
```
这个代码会将 `.container` 设置为弹性布局,并且使用 `flex-wrap: wrap` 让项目换行。使用 `justify-content: space-between` 让项目在主轴上均匀分布,同时使用 `align-items: center` 让项目在交叉轴上居中对齐。每个 `.item` 元素的宽度和高度都已经被预先设置好了,你可以根据自己的需求进行调整。