Html 文件和 css 实现无法在我的 chrome 浏览器上正确显示答案

【问题标题】：Html file and css implementation not displaying correctly on my chrome browserHtml 文件和 css 实现无法在我的 chrome 浏览器上正确显示
【发布时间】：2020-12-31 05:51:52
【问题描述】：

听起来很神奇，我在一个网站上工作，在这里与朋友和用户询问和交谈后，我的 html 文件没有显示 css 属性，因为它是准确的我必须做的。我变得非常绝望，因为我没有那么多时间，我不知道会发生什么。它应该如下所示：

但在我的浏览器中（我尝试过 chrome、edge 和 firefox），它看起来像这样：

如果你想尝试一下，我的朋友试过了，它可以正常工作：video 还有一个 sn-p：

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.segmento').forEach(section => {
  ScrollTrigger.create({
    trigger: section,
    start: 'top top',
    pin: true,
    pinSpacing: false
  });
});
AOS.init({
        offset: 400, // offset (in px) from the original trigger point
        delay: 0, // values from 0 to 3000, with step 50ms
        duration: 1000 // values from 0 to 3000, with step 50ms
      });

html {
    scroll-behavior: smooth;
}

.navbar-nav>li {
    padding-left: 20px;
    padding-right: 20px;
}

nav {
    background-color: #000033;
    opacity: 0.95;
}

.cookie-container {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: #2f3640;
    color: #f5f6fa;
    padding: 15px 32px;
    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.151);
    transition: 400ms;
}

.cookie-container a {
    color: #f5f6fa;
}

.cookie-container.active {
    bottom: 0;
}

.cookie-btn {
    background: #e84118;
    border: 0;
    color: #f5f6fa;
    padding: 12px 48px;
    font-size: 18px;
    margin-bottom: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.column-right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.column-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #000;
    padding: 0rem 2rem;
}

.column-left h1 {
    margin-bottom: 3rem;
    font-size: 2rem;
    font-style: italic;
}

.column-left p {
    margin-bottom: 2rem;
    font-size: 2rem;
    line-height: 1.1;
}

.segmento {
    background: #66488f;
}

footer {
    margin: 0;
    bottom: 0;
    position: sticky;
    box-sizing: border-box;
    display: flex;
    color: #fff;
    background-color: #000033;
    padding: 50px;
    font-size: 14px;
    flex-flow: row wrap;
    height: 10vh;
}

.footer-left img {
    width: 50%;
    max-width: 150px;
    max-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.socials {
    text-align: center;
}

.footer>* {
    flex: 1 100%;
}

.footer-left {
    margin-right: 1.25em;
    margin-bottom: 2em;
}

.footer-right {
    display: flex;
    flex-flow: row wrap;
}

.footer-right>* {
    flex: 1 50%;
    margin-right: 1.25em;
}

.box a {
    color: #999;
}

.footer-bottom {
    text-align: center;
    color: #999;
    padding-top: 50px;
}

.footer-left p {
    padding-right: 20%;
    color: #999;
}

.socials a {
    background: #364a62;
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 10px;
    padding: 10px;
}

@media screen and (min-width: 600px) {
    .footer-right>* {
        flex: 1;
    }
    .footer-left {
        flex: 1 0px;
    }
    .footer-right {
        flex: 2 0px;
    }
}

@media (max-width: 600px) {
    .footer {
        padding: 15px;
    }
}

.btninicio {
    position: fixed;
    width: 50px;
    height: 50px;
    background: #6F1E51;
    bottom: 40px;
    right: 50px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 22px;
}

.footer h2 {
    font-weight: 600;
    font-size: 17px;
}

.footer ul {
    list-style: none;
    padding-left: 0;
}

.footer li {
    line-height: 2em;
}

.footer a {
    text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body header, .card{
    font-size: 1.3rem;
    font-family: 'Oswald', sans-serif;
    background: #f9f9f9;
}

a {
    color: #333;
    text-decoration: none;
}

.container {
    max-width: 1100px;
    margin: auto;
    overflow: auto;
    padding: 0 2rem;
}

.main-header {
    height: 55vh;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.main-header h1 {
    font-size: 4rem;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.main-header h1 span {
    color: #b50d10;
}

.main-header p {
    font-size: 2rem;
}

.card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
    background: #f1f1f1;
    margin-bottom: 2rem;
}

.card h3 {
    margin-bottom: 2rem;
}

.card img {
    width: 100%;
    height: 400px;
}

.card>div {
    padding: 2rem;
}

.card:nth-child(even) img {
    order: 2;
}

@media(max-width:600px) {
    .card {
        display: block;
    }
}

<!doctype html>
<html lang="es">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" \>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="histo.css">

    <title>History</title>
    <link rel="shortcut icon" href="log.png" />
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark  sticky-top">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">SneakerReport</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">
                    <a class="nav-link" href="ini.html"> <i class="fa fa-home"></i> Inicio <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="histo.html"> <i class="fa fa-book"></i> Historia</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fa fa-user"></i> Inscribete</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-certificate"></i>
                        Marcas
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#">Supreme <i class="fa fa-exclamation"></i></a>
                        <a class="dropdown-item" href="#">Palace <i class="fa fa-exclamation"></i></a>
                    </div>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <header class="main-header">
        <h1><span>Acrylic Painting</span> Gallery</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
            quam!
        </p>
    </header>
    <main class="container">
        <section class="card">
            <img src="https://i.ibb.co/VvC0vpN/paint-1.png" alt="" />
            <div>
                <h3>Acrylic Painting One</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
                    enim laudantium, animi veniam libero eveniet culpa unde perferendis
                    illo fugit corporis, voluptatibus totam dolorum, maiores magnam
                    officia. Ab, delectus.
                </p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>
        <section class="card" data-aos="fade-left">
            <img src="https://i.ibb.co/3NHjDcW/paint-2.png" alt="" />
            <div>
                <h3>Acrylic Painting Two</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
                    enim laudantium, animi veniam libero eveniet culpa unde perferendis
                    illo fugit corporis, voluptatibus totam dolorum, maiores magnam
                    officia. Ab, delectus.
                </p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>
        <section class="card" data-aos="fade-right">
            <img src="https://i.ibb.co/0VywMkW/paint-3.png" alt="" />
            <div>
                <h3>Acrylic Painting Three</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
                    enim laudantium, animi veniam libero eveniet culpa unde perferendis
                    illo fugit corporis, voluptatibus totam dolorum, maiores magnam
                    officia. Ab, delectus.
                </p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>

        <section class="card" data-aos="fade-left">
            <img src="https://i.ibb.co/5LkJFRP/paint-4.png" alt="" />
            <div>
                <h3>Acrylic Painting Four</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
                    enim laudantium, animi veniam libero eveniet culpa unde perferendis
                    illo fugit corporis, voluptatibus totam dolorum, maiores magnam
                    officia. Ab, delectus.
                </p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>
        <section class="card" data-aos="fade-right">
            <img src="https://i.ibb.co/61R8Q2y/paint-5.png" alt="" />
            <div>
                <h3>Acrylic Painting Five</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
                    enim laudantium, animi veniam libero eveniet culpa unde perferendis
                    illo fugit corporis, voluptatibus totam dolorum, maiores magnam
                    officia. Ab, delectus.
                </p>
                <a href="#" class="btn">Buy Now</a>
            </div>
        </section>
    </main>
    <footer class="footer segmento cuatro" style="bottom:0">
        <div class="footer-left">
            <img src="yzy.png" alt="snk">
            <p>SneakerReport nace como una solucion para que gente de todas las edades tenga una posibilidad
                de acceder a moda limitada sin pagar reventa.</p>
            <div class="socials">
                <a href="https://www.facebook.com/profile.php?id=100011277759449" target="_blank"><i class=" fab fa-facebook"></i> </a>
                <a href="https://twitter.com/Gonzaacdz" target="_blank"><i class=" fab fa-twitter"></i> </a>
                <a href="https://www.instagram.com/gx.neee/?hl=es" target="_blank"><i class=" fab fa-instagram"></i> </a>
            </div>
        </div>
        <ul class="footer-right">
            <li>
                <h2>Paginas en las que tenemos soporte</h2>
                <ul class="box">
                    <li><a href="#"> Supreme </a></li>
                    <li><a href="#"> Palace </a></li>
                </ul>
            </li>
            <li>
                <h2>Otras secciones</h2>
                <ul class="box">
                    <li><a href="histo.html"> Historia </a></li>
                    <li><a href="#"> Inscribete </a></li>
                </ul>
            </li>
            <li>
                <h2>Direccion</h2>
                <ul class="box">
                    <li> Avenida de los Rosales, 99 </li>
                    <li> Piso 1º Puerta B </li>
                    <li> Madrid, ES, 28021 </li>
                </ul>
            </li>
        </ul>
        <div class="footer-bottom">
            <p>Todos los derechos reservados a &copy;Gonzalo Canteli 2020 </p>
        </div>
    </footer>
    <a class="btninicio" href="#"> <i class=" fas fa-angle-double-up"></i> </a>
    <div class="cookie-container">
        <p>Utilizamos cookies propias y de terceros para mejorar la experiencia del usuario a través de su navegación. Si continúas navegando aceptas su uso. <a href="#">Política de cookies. </a></p>
        <button class="cookie-btn">
            De acuerdo
        </button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>
    <script src="cookieplugin.js"></script>
    <script src="histo.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

当您想要水平堆叠的卡片时，您的标记会显示垂直堆叠的卡片。

您的垂直堆叠卡片：

<section class="card">
  <img src="https://i.ibb.co/VvC0vpN/paint-1.png" alt="">
  <div>
    <h3>Acrylic Painting One</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error
      enim laudantium, animi veniam libero eveniet culpa unde perferendis
      illo fugit corporis, voluptatibus totam dolorum, maiores magnam
      officia. Ab, delectus.
    </p>
    <a href="#" class="btn">Buy Now</a>
  </div>
</section>

例如，这是一张水平堆叠的卡片，使用 Bootstrap 5.0：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<section class="card m-3" style="width: 90%; max-width: 600px">
  <div class="row g-0">
    <div class="col-6">
      <img class="img-fluid" src="https://i.ibb.co/VvC0vpN/paint-1.png" alt="">
    </div>
    <div class="col-6">
      <div class="card-body">
        <h3>Acrylic Painting One</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod error enim laudantium, animi veniam libero eveniet culpa unde.
        </p>
        <a href="#" class="btn">Buy Now</a>
      </div>
    </div>
  </div>
</section>

【讨论】：