个人中心
gpt4 book ai didi

css 网格区域无法正常工作

转载 作者：太空宇宙 更新时间：2023-11-04 07:55:32 24 4
gpt4 key购买 nike

第一次尝试使用 css 网格模板区域，但它根本不起作用。它在第一行中没有放置任何内容，然后尝试将第二行中的所有内容叠加在一起。感谢任何帮助. 谢谢。我正在使用 chrome 62。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Signature Urgent Care</title>
<link rel="stylesheet" href="main.css">
</head>
<body>

<div class="grid">
<header>
  <img src="signatureLogo.png">
  <img src="arrow-header.png">
  <div class="address-hours">
    <p>120 2nd Street South<br>St. Petersburg, FL 33701</p>
    <p>Mon-Fri 8 AM-8 PM<br>Sat-Sun 9 AM-4 PM</p>
  </div>
  <div>
    <p>Call</p>
    <p>1.727.851.9993</p>
    <p><a href="#">Click Here for Directions</a></p>
  </div>
</header>

<nav>
  <ul>
    <li><a>Home</a></li>
    <li><a>About Us</a></li>
    <li><a>Services</a></li>
    <li><a>Insurance / Forms</a></li>
    <li><a>Location &amp Hours</a></li>
  </ul>
</nav>

<div class="home-image">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/13.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/11.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/12.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/7.png">
  <img src="http://signatureurgentcare.com/wp-content/themes/signatureurgentcare/images/slider/6.png">
</div>

<div class="explain">
  <img src="arrow-body.png">
  <p>Signature Urgent Care clinic is your best option if you are looking for urgent care centers or clinics in downtown Saint Petersburg, FL 33701, 33704 or 33705 area. 
  Signature Urgent Care is a walk-in medical clinic (health clinic) in downtown Stpete where no appointments are needed and you can be seen by a doctor fast.
  Signature Urgent Care is open seven days a week including weekends, after hours and holidays.</p>
  <p>Most insurances are accepted. No insurance, No problem! We offer $75 doctor's visit and best cash prices.
  Signature Urgent Care offers DOT physicals, Labs, IV fluids, Xrays, TB skin testing, drug screens and Workman's Comp services also. We treat accident
  and injury patients including motor vehicle accident patients. Call us today or just walk in and experience the difference convenience and quality makes!</p>
</div>

<section class="picture-summary">
  <a href="#"><div class="about-pic">
    <h2>ABOUT US</h2>
    <img src="aboutBTN.png">
    <ul>
      <li>Meet the doctor</li>
      <li>Tour our clinic</li>
      <li>Join our team</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div></a>

  <a href="#"><div class="patient-services-pic">
    <h2>PATIENT SERVICES</h2>
    <img src="patientBTN.png">
    <ul>
      <li>Cough/cold/strep/flu</li>
      <li>Aches and Pains</li>
      <li>Physicals and vaccinations</li>
      <li>Xray, EKGs, Labs and more</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div></a>

  <a href="#"><div class="insurance-pic">
    <h2>INSURANCE/FORMS</h2>
    <img src="insuranceBTN.png">
    <ul>
      <li>Insurances accepted</li>
      <li>Patient forms</li>
    </ul>
    <h3>LEARN MORE</h3>
  </div>
  </a>

</section>

<footer>
<div class="hours">
  <h2>Our Hours</h2>
  <p>Mon-Fri 8 AM-8 PM<br>Sat-Sun 9 AM-4 PM</p>
  <p>Phone: 727-851-9993<br>Fax: 727-851-9992</p>
  <a href="https://www.facebook.com/SignatureUC/?ref=page_internal"><img src="facebook.png"></a>
  <a href="https://twitter.com/SignatureUC"><img src="twitter.png"></a>
  <a href="https://plus.google.com/106387525484792113281"><img src="google.png"></a>
</div>
<div class="Address">
  <h2>Address</h2>
  <p>120 2nd Street South<br>St. Petersburg, FL 33701</p>
  <p>We provide urgent care services on a walk-in basis to: St. Petersburg, 
  Old Northeast, Kenwood, Gulfport, St.Pete Beach, Lealman, Pinellas Park, 
  Harbor Bluffs, Belleair Bluffs, Treasure Island,
  Madeira Beach, North Redington Beach, Kenneth City, Bay Pines, Indian Shores, Largo.</p>
</div>
<div class="Parking">
  <h2>Parking</h2>
  <p>Parking is validated. Parking is conveniently located right across the street at
  the Rowdies’ Garage, previously called New McNulty Garage (101 2nd St S, St Petersburg)
  or the SouthCore Parking Garage (100 1st Avenue South). Park and bring the ticket with you.
  Signature Urgent Care will give you a voucher for parking if you are seen in 
  the clinic. Street parking is available right in front of the clinic.</p>
</div>

</footer>
<section class="copy">
  <p>&copy 2015 Signature Urgent Care. All Rights Reserved</p>
</section>

</div>
</body>
</html>

这是CSS。 Stack 不允许我发布这个，因为它说它主要是代码，但不确定还能说什么。 

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"header header header header header"
"nav nav nav nav nav nav"
"home home home home home"
"ex ex ex ex ex ex"
"sum sum sum sum sum"
"foot foot foot foot foot"
"copy copy copy copy copy";

 }

header {
 grid-area: header; 
}

nav {
grid-area: nav; 
}

.home-image {
grid-area: home;
} 

.explain {
grid-area: ex;
}

.picture-summary {
grid-area: sum;
}

footer {
grid-area: foot;
}

.copy {
grid-area: copy;
}

最佳答案

确保每行中的网格区域单元格与列声明匹配。已声明五列，但在导航行和前行的情况下，目前每行有六个单元格。单元格需要形成一个矩形，如下所示:

  grid-template-areas:
    "header header header header header"
    "nav nav nav nav nav"
    "home home home home home"
    "ex ex ex ex ex"
    "sum sum sum sum sum"
    "foot foot foot foot foot"
    "copy copy copy copy copy";

关于css 网格区域无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47370239/

24 4 0
文章推荐： javascript - NuxtJS 无法使用变量加载多个 CSS 表
文章推荐： c - C中int和char之间的数值运算
文章推荐： Java - 如何将 png 文件添加到 JPanel
文章推荐： css - Div 未调整大小
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com