我可以制作基本的圣杯布局，但一旦要把盒子放进盒子里，事情就会分崩离析。我看过一些代码进行比较，但这种特定的布局似乎并不常见。
我想做的是在网页的主要内容中有4个柔性框。框的上方是一个标题，可能是下面的一段。柔性接线盒下面是每个柔性接线盒的说明，该说明居中并与柔性接线盒对齐。柔性盒子会装一张照片，但现在这并不重要。
https://codepen.io/ct2k/pen/mdqdpzw
}
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1.1em;
text-align: center;
color: #FFF;
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
padding: 20px;
}
.holy-grail header,
.holy-grail footer {
background: #0c31aa;
}
.hg-sidebar {
background: #b7d3ec;
}
.holy-grail-content {
color: #777;
}
.holy-grail {
min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.holy-grail-content {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
.holy-grail-sidebar-1 {
order: -1;
}
.holy-grail-body {
flex-direction: row;
}
.hg-sidebar {
flex: 0 0 260px;
}
.block {
border: solid;
border-color: cornflowerblue;
width: 200px;
height: 200px;
font-size: 48px;
text-align: center;
}
.mc {
display: flex;
justify-content: center;
align-items: center;
}
您可以将卡的这些div插入其他主要的div 中
我尝试使用另一个div来存储来快速解决它
- 卡片的标题
- 段落
- 卡片
- 卡片说明
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1.1em;
text-align: center;
color: #FFF;}
html, body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 1.1em;
text-align: center;
color: #FFF;
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
padding: 20px;
}
.holy-grail header,
.holy-grail footer {
background: #0c31aa;
}
.hg-sidebar {
background: #b7d3ec;
}
.holy-grail-content {
color: #777;
flex: 1 1 auto;
display: flex;
justify-content: center;
/*Add this line*/
flex-direction: column;
}
.holy-grail {
min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
@media (min-width: 768px) {
.holy-grail-sidebar-1 {
order: -1;
}
.holy-grail-body {
flex-direction: row;
}
.hg-sidebar {
flex: 0 0 260px;
}
.block {
border: solid;
border-color: cornflowerblue;
width: 200px;
height: 200px;
font-size: 48px;
text-align: center;
}
.mc {
display: flex;
justify-content: center;
align-items: center;
}
.card-with-header-and-desc-container {
text-align: center;
width: 200px;
/*height: 200px;*/
}
.card-with-header-and-desc-container__header {
font-weight: 700;
font-size: 1.5rem
}
.card-with-header-and-desc-container__sub {
font-weight: 500;
font-size: 1.1rem
}
.extra-text{
margin: 0 10px;
}
}
.holy-grail header,
.holy-grail footer,
.hg-sidebar,
.holy-grail-content {
padding: 20px;
}
.holy-grail header,
.holy-grail footer {
background: #0c31aa;
}
.hg-sidebar {
background: #b7d3ec;
}
.holy-grail-content {
color: #777;
}
.holy-grail {
min-height: 100vh;
}
.holy-grail,
.holy-grail-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.holy-grail-content {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
@media (min-width: 768px) {
.holy-grail-sidebar-1 {
order: -1;
}
.holy-grail-body {
flex-direction: row;
}
.hg-sidebar {
flex: 0 0 260px;
}
.block {
border: solid;
border-color: cornflowerblue;
width: 200px;
height: 200px;
font-size: 48px;
text-align: center;
}
.mc {
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<body class="holy-grail">
<!--<body class="holy-grail">-->
<header>
<p>Header</p>
</header>
<div class="holy-grail-body">
<section class="holy-grail-content">
<h1>Main content</h1>
<div class="mc">
<div class="card-with-header-and-desc-container">
<p class="card-with-header-and-desc-container__header">Some header</p>
<p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
<div class="block block1">1
</div>
<p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<p class="extra-text">Whats</p>
<div class="card-with-header-and-desc-container">
<p class="card-with-header-and-desc-container__header">Some header</p>
<p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
<div class="block block2">2
</div>
<p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<p class="extra-text">In</p>
<div class="card-with-header-and-desc-container">
<p class="card-with-header-and-desc-container__header">Some header</p>
<p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
<div class="block block3">3
</div>
<p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<p class="extra-text">The</p>
<div class="card-with-header-and-desc-container">
<p class="card-with-header-and-desc-container__header">Some header</p>
<p class="card-with-header-and-desc-container__sub">maybe a paragraph</p>
<div class="block block4">4
</div>
<p>Description of each card Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<p class="extra-text">Box?</p>
</div>
</section>
<div class="holy-grail-sidebar-1 hg-sidebar">
<p>Sidebar 1</p>
</div>
<div class="holy-grail-sidebar-2 hg-sidebar">
<p>Sidebar 2</p>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
</body>
</html>应用示例
如果这不能解决你的问题，可以考虑添加一些图像来显示你的预期设计。