“更多详细信息”按钮将一排图像推得不合时宜

Question

我有两行四个 div 类缩略图，带有一个查看更多详细信息按钮，按下该按钮时会显示更多文本。当我测试单个缩略图时，它工作正常，但现在有两行缩略图。单击该按钮时，其他缩略图会被推到行对齐之外。

Java，然后是 CSS，然后是 HTML。不知为何写不出来

    function toggle(button){
    
        // this works because the button is immediately after the "moreDetails" element it pertains to
        let Text = button.previousElementSibling;
    
        // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
        //let Text = button.parentElement.querySelector(".moreDetails");
    
        if(Text.style.display == "none"){
            Text.style.display= "block";
        }
        else {
            Text.style.display = "none";
        }
    }

const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
  moreDetailses[i].style.display = "none";
}

.thumbnail-row {
  height: 400px;
  width: auto;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 01 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 02 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 03 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 04 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 05 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 06 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

Answer 1

从.thumbnail-row 中移除400px 的固定高度，改为min-height。然后让它display:flex;

这是我改变的：

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

在这里查看所有工作：

 function toggle(button){
    
        // this works because the button is immediately after the "moreDetails" element it pertains to
        let Text = button.previousElementSibling;
    
        // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div.
        //let Text = button.parentElement.querySelector(".moreDetails");
    
        if(Text.style.display == "none"){
            Text.style.display= "block";
        }
        else {
            Text.style.display = "none";
        }
    }

const moreDetailses = document.querySelectorAll(".moreDetails");
for (let i = 0; i < moreDetailses.length; i++) {
  moreDetailses[i].style.display = "none";
}

.thumbnail-row {
  width: auto;
  min-height: 400px;
  display: flex;
}

.thumbnail-frame {
  width: 19.75%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.thumbnail-frame a {
  margin: 0;
}

.thumbnail-frame h3 {
  text-align: center;
}

.thumbnail-frame h4 {
  text-align: center;
}

.thumbnail {
  background-color: black;
  width: 100%;
  height: 350px;
  display: inline-block;
  /* makes it fit in like an <img> */
  background-size: cover;
  /* or contain */
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 01 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 02 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 03 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 04 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>

<div class="thumbnail-row">
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 05 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
  <div class="thumbnail-frame">
<div class="thumbnail" style="background-image: url(myharddrivedirctory);"></div>
<div class="details">
  <div class="moreDetails">
    <h3> episode 06 details </h3>
  </div>
  <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button>
</div>
  </div>
</div>