Question

我的旗帜下有一节。它具有背景并将其分为三个要素。使用网格，我使它们位于行内，但是我的第一部分具有图像而不是文本，然后是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>

Answer 1

您需要告诉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>

使用CSS网格在div中定位div

1 个答案: