英文:
How do I position divs / cards like this?
问题
我在定位<div>元素方面遇到了问题，就像照片中的那些元素一样。
我已经尝试过以下方式，但是在使用CSS进行样式设置和定位时遇到了问题。
单个<div>被命名为上面的前两个卡片/<div>。
第二个<div>被命名为下面的第二个卡片/<div>。
英文:
I'm having trouble position divs like the ones in the photo.
<div class="cards" id="cards">
<div class="container">
<div class="single">
<span class="dot"></span>
</div>
<div class="single">
<span class="dot"></span>
</div>
<div class="second">
<span class="dot"></span>
</div>
<div class="second">
<span class="dot"></span>
</div>
</div>
</div>
I've tried it like this but I've had trouble styling and positioning it with css.
Single divs are named the first two cards / divs up.
Second divs are named the second cards / divs down.
答案1
得分: 1
CSS Grid可以帮助您创建这些类型的布局。请查看以下代码，以了解如何根据模拟进行盒子布局。
确保仔细学习MDN上关于“Grid模板区域”的以下部分：使网格单元格保持空白
div {
border: 1px solid black;
}
.strategy {
grid-area: strategy;
}
.efficient {
grid-area: efficient;
}
.fast {
grid-area: fast;
}
.reliable {
grid-area: reliable;
}
.wrapper {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"fast efficient ." /* 3列: fast / efficient / . === 空列 */
". strategy reliable";
}
<section class="wrapper">
<div class="fast">Fast</div>
<div class="efficient">Efficient</div>
<div class="strategy">Strategy</div>
<div class="reliable">Reliable</div>
</section>
资源: CSS Grid完全指南
英文:
CSS Grid can help you with these types of layouts. Study the code below to see how you can lay out the boxes according to the mockup.
Make sure to carefully study the following section on MDN about Grid template areas: Leaving a grid cell empty
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
div {
border: 1px solid black;
}
.strategy {
grid-area: strategy;
}
.efficient {
grid-area: efficient;
}
.fast {
grid-area: fast;
}
.reliable {
grid-area: reliable;
}
.wrapper {
width: 500px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"fast efficient ." /* 3 cols: fast / efficient / . === empty col */
". strategy reliable";
}
<!-- language: lang-html -->
<section class="wrapper">
<div class="fast">Fast</div>
<div class="efficient">Efficient</div>
<div class="strategy">Strategy</div>
<div class="reliable">Reliable</div>
</section>
<!-- end snippet -->
Resources: Complete Guide to CSS Grid
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论