【发布时间】：2020-12-26 07:27:07
【问题描述】：
我正在尝试完成一个编码挑战，该挑战产生一个包含四个框的三列布局，以便在桌面上查看时，中心列保持 2 个框，而周围的列保持 1 个垂直居中的框：
一列包含移动设备上的所有四个框：
我正在努力解决桌面布局问题。
我研究了网格、flexbox 和列，但我不清楚哪个（如果有的话）适合这个项目。有什么建议的方法吗？ （通过“方法”我不是要求特定代码，只是您推荐的理想布局方法。）
这是我的 HTML，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link media="screen" rel="stylesheet" href="stylesheet.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet ???? -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="main-container">
<div class="top-text">
<div>Reliable, efficient delivery</div>
<div>Powered by Technology</div>
<div>
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
</div>
</div>
<div class="info-boxes">
<div class="info-box">
Supervisor
Monitors activity to identify project roadblocks
</div>
<div class="info-box">
Team Builder
Scans our talent network to create the optimal team for your project
</div>
<div class="info-box">
Karma
Regularly evaluates our talent to ensure quality
</div>
<div class="info-box">
Calculator
Uses data from past projects to provide better delivery estimates
</div>
</div>
</div>
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Aaron McDonald</a>.
</p>
</footer>
</body>
</html>
【问题讨论】：
-
请至少提供一些HTML，在这里回答问题的志愿者可以回答。您已经提出了很多要求：制作响应式布局，以便“桌面和移动布局之间的每个尺寸......都感觉[s] 响应式”。也很高兴看到您做出一些努力来展示您所做的研究以及您如何尝试将这些研究应用于您的问题。
-
我不是要求任何人为我“解决它”。一个简单的“嗯，我认为 flexbox 最好创建你所追求的三列布局，因为 'x' 原因......”就足够了。我什至没有要代码。
-
是你根本不允许更改 HTML 的问题吗？
-
@Aaron 您可以使用浮动、弹性或网格来完成该设计。什么是“正确的”并不重要，因为你说你在挑战，应该知道它们之间的区别。