用flex布局做一个左边是图片下面是文字,右边是用列表做的图片加文字和按钮,具体写出代码
时间: 2024-10-20 19:11:19 浏览: 27
FLEX写的名片管理系统(源代码无注释版)……
在Flex布局中创建这种结构可以利用`display: flex;`以及一些基本的CSS属性。首先,我们需要一个包含三个部分的容器,左右两部分将并排显示,中间部分会包裹内容。这里是一个简单的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100vh; /* 高度自适应 */
}
.left-section {
width: calc(50% - 20px); /* 留出20px间隙 */
background-color: #f8f9fa; /* 图片背景色 */
}
.right-section {
width: calc(50% + 20px);
display: flex;
flex-direction: column;
}
.list-items {
list-style-type: none;
padding: 0;
}
.item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.image-and-text {
flex: 1;
}
.button-container {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-section">
<img src="your-image-url" alt="图片描述"> <!-- 请替换为实际图片URL -->
</div>
<div class="right-section">
<ul class="list-items">
<li class="item">
<div class="image-and-text">
<img src="another-image-url" alt="图片描述"> <!-- 另一张图片 -->
<span>图片文字描述</span>
</div>
<button>按钮1</button>
</li>
<!-- 添加更多列表项 -->
</ul>
<div class="button-container">
<button>按钮2</button>
</div>
</div>
</div>
</body>
</html>
```
阅读全文