“更多詳細資訊”按鈕將一排影像推得不合時宜

我有兩行四個 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>

uj5u.com熱心網友回復：

洗掉 400px 的固定高度.thumbnail-row并min-height改為 a 。然后做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>

標籤：

上一篇：如何從字串轉到ToDictionary

下一篇：用戶使用React和Firebase登錄（從“登錄”到“個人資料”）后，如何更新我的導航欄？