当我们在 HTML 中使用 PHP 时，为什么 CSS 不起作用？[关闭]-解网

问：

编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

2天前关闭。

改进此问题

我创建了一个网页。在这个网页中，我给出了 max-width。这个网页看起来像一个照片库。每张图片都在锚标记内，因此如果有人单击它，它将重定向到其他页面。我在网格模板列为 1fr 1fr 1fr 的网格中进行了设计，以便每个设备的布局都保持不变。CSS在硬编码时可以正常工作，但是一旦我使用PHP来获取数据，布局/设计就无法正常工作。以下是我的代码-

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

.blog-page-main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.blog-page-main-container .logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  gap: 8px;
}

.blog-page-main-container .logo img {
  width: 100%;
  max-width: 40px;
}

.blog-page-main-container .logo-title p {
  font-weight: 500;
  font-size: 0.95rem;
}

.blog-page-main-container .tagline {
  padding: 15px 0;
}

.blog-page-main-container .tagline p {
  color: #666;
  font-size: 0.85rem;
}

.blogs-main-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.blogs-main-container .blogs-container {
  width: 100%;
  max-width: 916px;
  gap: 5px;
  display: flex;
  flex-direction: column;
}

.blogs-main-container .blogs-container .blog-banner {
  width: auto;
  height: auto;
  display: flex;
}

.blogs-main-container .blogs-container .blog-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  flex-grow: 1;
}

.blogs-main-container .blogs-container .blogs-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: 5px;
  max-width: 916px;
  margin-bottom: 5px;
  justify-content: center;
}

.blogs-main-container .blogs-container .blogs-grid a {
  display: flex;
  width: auto;
  height: auto;
}

.blogs-main-container .blogs-container .blogs-grid a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  flex-grow: 1;
  width: 30%;
}

@media only screen and (max-width: 768px) {
    .blog-page-main-container .logo {
        justify-content: flex-start;
    }

    .blogs-main-container .blogs-container {
        gap: 2px;
    }

    .blogs-main-container .blogs-container .blogs-grid {
        gap: 2px;
    }
}

<div class="blog-page-main-container">
        <div class="logo">
            <img src="img/company-logo.png" alt="">
            <div class="logo-title">
                <p>Lorem</p>
            </div>
        </div>
        <div class="tagline">
            <p>Click on media to learn more</p>
        </div>
        <div class="blogs-main-container">
            <div class="blogs-container">
                <div class="blog-banner">
                    <img src="img/banner.jpg" alt="">
                </div>
                <div class="blogs-grid">

                    <?php
                        $sql = "SELECT * FROM blogs ORDER BY blog_id DESC";
                        $result = mysqli_query($conn, $sql);
                        
                        while ($row = mysqli_fetch_assoc($result)){
                        
                            $blog_image = $row['blog_image'];
                            $blog_img_alt_desc = $row['blog_img_alt_desc'];
                            $blog_image_link = $row['blog_image_credit_link'];

                            echo '<a href="'.$blog_image_link.'">
                                <img src="img/'.$blog_image.'" alt="'.$blog_img_alt_desc.'">
                            </a>';
                        
                        }
                    ?>
                </div>
            </div>
        </div>
    </div>

注意 - 当我们从图像标签中删除“$blog_image”时，CSS 工作正常。

我想看到如下样子——

但它看起来像下面这样——

PHP HTML CSS

@RanishKumar对不起，我不确定你的意思是什么？请按照我概述的步骤将硬编码的 HTML 与 PHP 生成的版本进行比较，然后根据需要更正 PHP 和/或数据库数据，以便它产生可比较的输出。如果您发现自己对此感到困难，请在您的问题中发布 HTML 代码示例，以便我们为您提供帮助。目前，我们没有足够的信息来了解您遇到的确切错误。编程问题通常与非常小的细节有关。如果没有该问题的最小可重现示例，我们无法确切地说出您的问题是什么。

1赞 CBroe 11/17/2023

我猜（因为到目前为止您提供的信息不允许更多），很可能是或包含字符，当这样插入时，会破坏 HTML 语法。当您仔细检查生成的 HTML 代码时，这真的不难弄清楚......$blog_image$blog_img_alt_desc

1赞 brombeer 11/17/2023

仅供参考，您的包含和.blogs-main-container .blogs-container .blogs-grid a imgwidth: 100%; width: 30%;

答：

-2赞 lasha maraneli 11/17/2023 #1

我猜，如果你调用domain/img/'.$blog_image.，它将显示404，应该是路径错误，你只需要纠正它。

当我们在 HTML 中使用 PHP 时，为什么 CSS 不起作用？[关闭]

Why CSS not working when we use PHP inside the HTML? [closed]

评论

评论