拆分HTML与CSS文件后图片画廊效果不符，求原因（HTML/CSS新手）

一、HTML文件中的问题 #

• 结构不符合规范，<title>位置错误：拆分后的HTML把<title>放在了<head>标签外面，正确的写法是所有头部元信息（包括title、CSS链接）都必须放在<head>内部。
• 丢失关键的网格容器：原代码里所有图片都被包裹在<main class="grid">容器中，.grid的CSS样式才能作用到容器并控制内部图片的布局。拆分后的HTML直接将img暴露在根节点，.grid样式没有可应用的元素，自然无法形成网格布局。
• CSS链接标签引号语法错误：<link rel="stylesheet' href="gallery-example.css">中rel属性混用了双引号和单引号，属于语法错误，会导致浏览器无法正确加载CSS文件。

修复后的HTML代码：

<!doctype html>
<head>
    <title>Example</title>
    <link rel="stylesheet" href="gallery-example.css">
</head>
<body>
    <main class="grid">
        <img src="http://i.imgur.com/tI5jq2c.jpg">
        <img src="http://i.imgur.com/37w80TG.jpg">
        <img src="http://i.imgur.com/B1MCOtx.jpg">
    </main>
</body>

二、CSS文件中的问题 #

• 新增全局img样式破坏原有布局：你在CSS里添加了img { float: left; width: 100px; height: 100px; object-fit: cover; }，这段代码会强制所有图片固定宽高并左浮动，完全覆盖了原代码中.grid img的自适应宽高逻辑——原效果是让图片自适应网格列的宽度，而非固定100px。

修复后的CSS代码：

.grid { 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    align-items: stretch;
}
.grid img {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
    max-width: 100%;
}

总结 #

上述HTML结构错误+CSS冗余样式，共同导致拆分后无法还原原画廊效果。按照修复后的代码调整，即可恢复原有的自适应网格画廊布局。

内容的提问来源于stack exchange，提问作者JKC