如何控制div兒童的垂直間距？

Question

任務 ：

保留拇指指甲的垂直列表。 拇指指甲必須按窗口尺寸縮放。 拇指指甲包含在div中，其尺寸使用vw，vh給出。 在每次調整大小時，Javascript函數會重新計算所有拇指指甲的寬度和高度，以便在div的可見區域中出現固定數量的指甲，並盡可能大。 為了保持拇指指甲的垂直間距不變，可見拇指指甲的高度相加，增加一個因子並分配到div的高度。

問題 ：

當使窗戶非常狹窄時，拇指指甲之間的垂直空間越來越大。 為hFit和hTotal計算的值（請參閱下面的Javascript代碼）似乎不正確，導致不需要的疊加或拇指指甲的垂直間距過大。

細節 ：

整個布局如下：

最外面的div（.content-area）控制整個控件的垂直對齊（居中）。 .content-area（.content-control）的子節點控制實際列表（.content-data）的布局以及將出現在該列表左側的關閉按鈕（.close-btn-area）。

代碼 ：

CSS：

.content-area
{
    position: absolute;
    left: 2vw;
    top: 5vh;
    width: 30vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    list-style: none;
    opacity: 0.0;
}

.content-control
{
    position: relative;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: flex-start;
    overflow: hidden;
}

.content-data
{
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#thumbs-content
{
    margin: 1vmin 1vmin 1vmin 1vmin;
    height: 78vh;
    font-family: 'Alegreya Sans SC', Verdana, sans-serif;
    font-variant: small-caps;
    overflow: hidden;
    color:#404040;
}

.thumb-size
{
    margin: 1vmin 0;
    width: 16vw;
    height: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;        
}

.close-btn-area
{
    margin: 1vmin 1vmin 1vmin 1vmin;
    width: 4vh;
    height: 4vh;
    display: flex;
    align-items: start;
    justify-content: flex-start;
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.close-btn
{
    width:    4vh;
    height: 4vh;
    border: 0;
}

HTML：

<div class="content-area" id="thumbs-area">
    <div class="content-control" id="thumbs-control">
         <div class="close-btn-area" id="close-thumbs">
             <a><img class="close-btn" id="close-btn-thumbs" src="close-btn-inverted-128x128.png">
         </div>
         <div class="content-data" id="thumbs-data">
            <article id="thumbs-content">
                <div class="thumb-size"><img class="thumb" id="thumb1" src="img1.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb2" src="img2.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb3" src="img3.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb4" src="img4.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb5" src="img5.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb6" src="img6.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb7" src="img7.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb8" src="im8.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb9" src="im9.jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb10" src="img10jpg"></div>
                <div class="thumb-size"><img class="thumb" id="thumb11" src="img11.jpg"></div>
            </article>
        </div>
    </div>
</div>

JavaScript的：

const nVisibleThumbs = 6;
var nTopThumb = 0;
var nThumbCount = 11; // simplified; will be computed in the actual code
var nThumbScale = 0.9;

function RecalcThumbsLayout () 
{
    var elem = $('#thumbs-content');
    var w = elem.width ();
    var h = Math.round (elem.height () * nThumbScale);
    var hFit = 0;
    var wFit = 0;
    var hTotal = 0;

    for (i = 1; i <= nThumbCount; i = i + 1) 
    {
        var idStr = "#thumb" + i;
        var ar = Math.min (1.5, $(idStr).prop ('naturalWidth') / $(idStr).prop ('naturalHeight'));
        var ph = Math.round (h / nVisibleThumbs * 0.9);
        var pw = Math.round (Math.min (ph * ar, w * 0.9));
        ph = Math.floor (pw / ar); // considers portrait format images
        $(idStr).css ("width", pw);
        $(idStr).css ("height", ph);
        hTotal += ph;
        if ((i > nTopThumb) && (i <= nTopThumb + nVisibleThumbs))
            hFit += ph;
        if (wFit < pw)
            wFit = pw;
    }
    wFit *= 1.25; // compensate for scaling above
    hFit *= 1.25; // compensate for scaling above
    $('#thumbs-data').css ('width', wFit + 'px'); 
    $('#thumbs-data').css ('height', hFit + 'px'); 
    elem.css ('height', hTotal + 'px');
}

示范 ：

要查看不需要的效果，您可以訪問： http ： //www.brockart.de/S ，單擊“Schmuck”，然后水平調整瀏覽器窗口的大小。

問題 ：

1. 我需要在Javascript中進行哪些更改才能使其正常工作？
2. 是否有一種更優雅的方式只使用css / html執行此操作？

Answer 1

你可以在沒有JS的情況下使用更簡單的HTML和CSS（靈活的盒子和過多的容器看起來不必要）。

以來

保留拇指指甲的垂直列表。 ......固定數量的它們出現在div的可見區域

水平調整大小不應影響縮略圖大小以保持圖像寬高比。

因此，我們所需要的是根據所需的可見縮略圖數量來計算和設置圖像高度。

以全屏模式運行下面的代碼段並調整窗口大小：

 .content { position: absolute; left: 2vw; top: 5vh; height: 90vh; } .thumbs { height: 100%; padding: 0 1rem; overflow-y: auto; } .thumbs img { display: block; box-sizing: border-box; /* since we need to fit 6 images, set img height = 1/6 of the container height */ height: 16.667%; width: auto; border: solid 1vh transparent; } .close-btn { float: left; width: .9em; height: .9em; border: solid .15em; border-radius: 55%; color: #fff; background: #000; box-shadow: 0 0 2px #000; text-align: center; font: 400 2rem/.9 sans-serif; } 

 <div class="content"> <a class="close-btn">&times;</a> <div class="thumbs"> <img src="https://picsum.photos/400/200/?1"> <img src="https://picsum.photos/400/200/?2"> <img src="https://picsum.photos/400/200/?3"> <img src="https://picsum.photos/400/200/?4"> <img src="https://picsum.photos/400/200/?5"> <img src="https://picsum.photos/400/200/?6"> <img src="https://picsum.photos/400/200/?7"> <img src="https://picsum.photos/400/200/?8"> <img src="https://picsum.photos/400/200/?9"> <img src="https://picsum.photos/400/200/?0"> <img src="https://picsum.photos/400/200/?a"> <img src="https://picsum.photos/400/200/?b"> </div> </div> 

Answer 2

替換.thumb-size

  .thumb-size
   {
      margin: 1vmin 0;
     width: 16vw;
    height: 12vh;
    display: flex;
     justify-content: center;
     align-items: center;        
    }

至

   .thumb-size
   {
      margin: 1vmin 0;
     width: 16vw;
    height: auto;
    display: flex;
     justify-content: center;
     align-items: center;
    }

它將按預期工作

Answer 3

您可以按百分比（％）使用高度，以便子元素與父高度對齊。 您不需要使用JavaScript，您可以使用純CSS來完成這項工作。

Answer 4

在這里的一些評論的幫助下，這些評論沒有提供完整的解決方案，但是讓我知道如何創建它，我可以解決我的問題。 我在這里發布了我自己的問題的答案，以便我可以不加修改地保留我的問題，並突出顯示所需的更改。

有兩個相關的問題：

1. 將拇指指甲尺寸調整為文檔尺寸
2. 保留拇指指甲之間的垂直間距（最初，當使瀏覽器窗口非常窄時，列表顯示的拇指指甲量超過了所需數量）

所以我只需要改變CSS如下：

1. 拇指指甲的垂直間距取決於vh而不是vmin（當我想到這時，這是我自己的一個facepalm，因為這實際上非常明顯）：

   .thumb-size {margin：1vh 1vh​​; 顯示：flex; 辯解內容：中心; align-items：center; }

2. 在拇指指甲類中指定拇指指甲大小，並使用vh簡單地使其相對：

   .thumb {width：15vh; 身高：自動; border：2px solid＃404040; }

通過這些更改，我可以完全擺脫我試圖正確格式化拇指指甲列表的Javascript代碼。 該頁面現在非常適合窗口尺寸。

供參考，請參閱http://www.brockart.de/S