HTML 圣杯布局：使用五张图片创建三栏网站结构
以下是一个使用五张图片组成的 HTML 圣杯布局的示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.left-column,
.right-column,
.center-column {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
.left-column {
background-color: #f2f2f2;
}
.right-column {
background-color: #f2f2f2;
}
.center-column {
background-color: #fff;
flex: 2;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.content {
padding: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class='container'>
<div class='left-column'>
<div class='header'>Left Header</div>
<div class='content'>
<img src='image1.jpg' alt='Image 1'>
</div>
<div class='footer'>Left Footer</div>
</div>
<div class='center-column'>
<div class='header'>Center Header</div>
<div class='content'>
<img src='image2.jpg' alt='Image 2'>
<img src='image3.jpg' alt='Image 3'>
</div>
<div class='footer'>Center Footer</div>
</div>
<div class='right-column'>
<div class='header'>Right Header</div>
<div class='content'>
<img src='image4.jpg' alt='Image 4'>
</div>
<div class='footer'>Right Footer</div>
</div>
</div>
</body>
</html>
请确保在 img 标签中替换 src 属性的值为实际的图片路径。此布局中，左侧和右侧列的宽度相同，中间列的宽度是左右列的两倍。
原文地址: https://www.cveoy.top/t/topic/vFr 著作权归作者所有。请勿转载和采集!