用css3写一个左边是图片右边是文字的介绍总共9行的代码
时间: 2023-11-27 12:54:26 浏览: 116
可以使用Flex布局实现左边是图片右边是文字的介绍,代码如下:
HTML代码:
```html
<div class="container">
<img src="image.jpg" alt="Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel orci eget quam lacinia molestie. Sed euismod mauris eu lacus luctus, eget aliquet ipsum blandit. Sed pellentesque sapien vel metus tempus, a dictum lectus tincidunt.</p>
</div>
```
CSS代码:
```css
.container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
img {
flex-basis: 30%;
margin-right: 20px;
}
p {
flex-basis: 70%;
}
```
在上面的代码中,我们使用了`display: flex`来启用Flex布局。`flex-direction: row`设置主轴方向为水平方向,即左右排列。`align-items: center`将项目在交叉轴上居中对齐。`margin-bottom: 20px`设置每个介绍之间的间距。
对于图片和文字,我们使用`flex-basis`属性来设置它们的初始大小。在这里,图片占据30%的宽度,文字占据70%的宽度。同时,我们使用`margin-right`属性来为图片设置右侧的间距。
阅读全文