时间戳

首页 > 解决方案 > 使用css网格将div定位在div内

html - 使用css网格将div定位在div内

问题描述

我的旗帜下有部分。它有背景，分为三个元素。使用网格我让它们内联定位，但我的第一部分有图像而不是文本，然后又是 img，第二部分有图像和文本，第三部分只有文本。就像您在下面看到的那样，我如何将所有内容都放置在内？我真的不明白网格中的值，如何以及何时使用，你能向我解释一下吗？

这是代码：

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}
<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>

标签： htmlcsscss-grid

解决方案

您需要告诉 P 标签显示为内联块，否则它会自动占用 100% 的宽度。

看这里：

.banner-under .banner-content p {
   font-family: "Sintony";
   font-weight: 700;
   font-size: 14px;
   padding: 20px 5px;
   display: inline-block;
}

这是使用此编译的所有代码的片段（单击底部的蓝色按钮以查看它的工作

.banner-under {
  background-color: #edf1f3;
  height: 102px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-row: 1;
  grid-row: 1;
}

.banner-under .banner-content {
  z-index: 2;
  text-align: center;
  height: 35px;
}

.banner-under .banner-content p {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 14px;
  padding: 20px 5px;
  display: inline-block;
}

.banner-under .banner-content h3 {
  font-family: "Sintony";
  font-weight: 700;
  font-size: 35px;
}

.banner-under .banner-content img {
  height: 35px;
  padding-top: 10px;
}

.banner-under .banner-content span {
  color: #fea100;
}

@media (max-width: 996px) {
  .banner-under .banner-content {
    left: 20%;
  }
}
<div class="banner-under">
        <div class="banner-content" id="under-banner-first">
            <img src="https://via.placeholder.com/340C/O https://placeholder.com/" alt="">
            <p>READ
                <br><span>REVIEWS</span>
            </p>
            <img class="banner-arrow" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
        </div>
        <div class="banner-content">
            <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
            <p>CALL US NOW FOR
                <br><span>HOME DELIVERY</span>
            </p>
        </div>
        <div class="banner-content">
            <h3>1-088 005 006</h3>
        </div>
    </div>

推荐阅读