点击Puppies按钮后网格布局异常，Special Needs按钮位置偏移求助

我是一名前端开发新手，制作了一个模拟狗狗领养网站。网站设置了6个功能按钮，点击任意按钮可展示符合对应描述的狗狗图片，再次点击则隐藏图片。目前网站功能基本正常，但点击“幼犬”按钮时，会导致“特殊需求”按钮的位置发生偏移，恳请帮忙排查并解决此布局异常问题。

以下是网站的相关代码：

JavaScript代码 #

//---------------------------------------------------------//
var MaleArray = [
  "<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>",
  "<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>",
];

function showMalesFunction() {
  var x = document.getElementById("MalesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("MalesBtn").innerHTML = MaleArray;
  } else {
    x.style.display = "none";
  }
}
//---------------------------------------------------------//
var FemaleArray = [
  "<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
  "<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];

function showFemalesFunction() {
  var x = document.getElementById("FemalesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("FemalesBtn").innerHTML = FemaleArray;
  } else {
    x.style.display = "none";
  }
}

//---------------------------------------------------------//
var PuppiesArray = [
  "<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>"
];

function showPuppiesFunction() {
  var x = document.getElementById("PuppiesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("PuppiesBtn").innerHTML = PuppiesArray;
  } else {
    x.style.display = "none";
  }
}

//---------------------------------------------------------//
var AdultArray = [
  "<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>",
  "<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
  "<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];

function showAdultFunction() {
  var x = document.getElementById("AdultBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("AdultBtn").innerHTML = AdultArray;
  } else {
    x.style.display = "none";
  }
}

//---------------------------------------------------------//
var SeniorArray = [
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
];

function showSeniorFunction() {
  var x = document.getElementById("SeniorBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("SeniorBtn").innerHTML = SeniorArray;
  } else {
    x.style.display = "none";
  }
}

//---------------------------------------------------------//
var SpecialNeedsArray = [
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
]

function SpecialNeedsFunction() {
  var x = document.getElementById("SpecialNeedsBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("SpecialNeedsBtn").innerHTML = SpecialNeedsArray;
  } else {
    x.style.display = "none";
  }
}

CSS代码 #

* {
  box-sizing: border-box;
}

table {
  border: 2px solid #3399CC;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

td {
  padding: 0.5em;
  border: 2px solid #923cb1;
  text-align: left;
}

th {
  padding: 0.5em;
  border: 2px solid #3399CC;
  text-align: center;
}

tr:nth-of-type(odd) {
  background-color: #f5fafc;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

.grid-container6 {
  display: inline-grid;
  grid-column: 10px;
  text-align: center;
  width: 100%;
  border: 10px;
  position: relative;
  margin: 0 auto;
  border-color: purple;
  border-style: solid;
  column-gap: 10px;
  row-gap: 10px;
  column-rule-color: #e0299a;
  background-color: green;
}

button {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  color: white;
  font-size: 24px;
  border-radius: 40px;
  margin: 0 auto;
  display: inline;
  outline: none;
  padding: 6px 12px;
  background-color: #002171;
}

HTML代码 #

<main> <br>

  <div class="grid-container6">
    <div class="row">
      <!-- **************   GRID OPEN ************  -->
      <div class="column">
        <button onclick="showMalesFunction()"> Show Male Dogs </button>
        <div id="MalesBtn"> </div>
      </div>
      <!--  ************************************* -->
      <div class="column">
        <button onclick="showFemalesFunction()"> Show Female Dogs </button>
        <div id="FemalesBtn"> </div>
      </div>
      <!--  ************************************* -->
      <div class="column">
        <button onclick="showPuppiesFunction()"> 
        Show Puppy Dogs </button>
        <div id="PuppiesBtn"> </div>
      </div>
      <!--  ************************************* -->
      <div class="column">
        <button onclick="showAdultFunction()"> Show Adult Dogs </button>
        <div id="AdultBtn"> </div>
      </div>
      <!--  ************************************* -->
      <div class="column">
        <button onclick="showSeniorFunction()"> 
          Show Senior Dogs </button>
        <div id="SeniorBtn"> </div>
      </div>
      <!--  ************************************* -->
      <div class="column">
        <button onclick="SpecialNeedsFunction()"> Dogs With Special Needs </button>
        <div id="SpecialNeedsBtn"> </div>
      </div>
    </div>
  </div>
  <!-- ************** grid closed ********************-->


  </div>
  </div>
  <!--  ************************************* -->

  <!--  ************************************* -->
  <!--  ************************************* -->
</main>

问题根源与修复方案 #

问题分析

1. 布局方式冲突：你同时使用了float: left的.column类和inline-grid的.grid-container6，两种布局规则混合导致元素排列混乱。float会让元素脱离文档流，而grid容器应该用自身的网格规则管理子元素，两者叠加就会出现按钮偏移的问题。
2. Grid属性设置错误：.grid-container6里的grid-column属性是用来指定元素在网格中的列位置，不是定义列数的，正确定义列数应该用grid-template-columns。
3. HTML转义错误：JavaScript数组里的HTML用了</>转义字符，直接赋值给innerHTML会被解析成文本，无法正常渲染图片和链接。

具体修复步骤

1. 统一使用Grid布局
   修改CSS，移除float，用Grid规则管理按钮区域：

   .grid-container6 {
     display: grid; /* 替换inline-grid，确保容器占满宽度 */
     grid-template-columns: repeat(2, 1fr); /* 固定2列，每列宽度均分 */
     gap: 10px; /* 替代column-gap和row-gap，简化写法 */
     text-align: center;
     width: 100%;
     border: 10px solid purple;
     margin: 0 auto;
     background-color: green;
   }
   
   .column {
     padding: 5px; /* 移除float和width，由Grid控制布局 */
   }
   

2. 修正HTML转义问题
   把JavaScript数组里的转义字符改成正常HTML标签，比如：

   var MaleArray = [
     "<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>",
     "<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
     "<a href='Max.html'><img src='Max.png' alt='image.gif' style='width:20%'></a>"
   ];
   

   所有数组元素都需要这样修改，才能正常显示图片和链接。

3. 优化JavaScript逻辑（可选）
   把重复的切换逻辑封装成通用函数，减少冗余：

   function toggleDogSection(sectionId, contentArray) {
     const section = document.getElementById(sectionId);
     if (section.style.display === "none") {
       section.style.display = "block";
       section.innerHTML = contentArray.join(''); // 用join拼接数组，避免出现逗号分隔符
     } else {
       section.style.display = "none";
     }
   }
   

   之后调用只需：

   function showMalesFunction() {
     toggleDogSection("MalesBtn", MaleArray);
   }
   // 其他按钮函数同理替换
   

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