我如何像这样放置 div/卡片?
P粉218775965
P粉218775965 2023-09-08 16:28:44
0
1
365

我在定位 div 时遇到了问题,就像照片中的那样。

<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>

我已经尝试过这样的方法,但我在使用 css 对其进行样式设置和定位时遇到了麻烦。

单个 div 被命名为前两张卡/div。 第二个 div 被命名为向下的第二张卡/div。

P粉218775965
P粉218775965

모든 응답(1)
P粉680087550

CSS 网格可以帮助您处理这些类型的布局。研究下面的代码,了解如何根据模型布置盒子。

请务必仔细研究 MDN 上有关网格模板区域的以下部分:将网格单元格留空

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";
}
<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 网格完整指南

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!