html+css自适应左图右文布局
时间: 2023-07-27 13:32:42 浏览: 146
可以使用flexbox布局实现左图右文布局,同时使用媒体查询来实现自适应。
HTML代码:
```
<div class="container">
<img src="image.jpg" alt="Image">
<div class="text">
<h2>Heading</h2>
<p>Text here...</p>
</div>
</div>
```
CSS代码:
```
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
img {
flex: 0 0 50%;
max-width: 50%;
margin-right: 20px;
}
.text {
flex: 1;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
img {
max-width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
}
```
在上面的代码中,我们使用了flexbox布局来实现左图右文布局。`flex-wrap: wrap`属性可以使得容器内的元素自动换行。`align-items: center`属性可以使得容器内的元素在纵向方向上垂直居中。`flex: 0 0 50%`属性可以使得图片占据容器宽度的50%,而`flex: 1`属性可以使得文本占据剩余的宽度。
媒体查询可以在屏幕宽度达到一定值时,改变布局方式。在上面的代码中,我们使用`@media`查询,在屏幕宽度小于等于768px时,将容器的`flex-direction`属性改为`column`,使得图片和文本在纵向方向上排列,同时将图片的`max-width`属性设为100%,使得图片在小屏幕上可以占据整个屏幕宽度。