Html 带输入/标签/收音机的响应式图像库

我正在为一个使用输入、标签和无线电元素的响应图像库编写唯一的HTML/CSS代码（没有刻意使用javascript）。我现在让它像这样工作：

---

我想把这四个缩略图放在大图下面，但如果不破坏以下元素的位置，它似乎无法正常工作。我希望避免重叠，因为我不想为图像库设置固定的高度，因为我希望有机会显示多行缩略图，而以下元素应在整个库后对齐而不重叠。

我唯一能想到的是添加位置：相对和顶部：（desire distance）到（.tabs label）css元素。这将迫使我设置一个固定的高度，我还必须为.tab内容（大图像）设置一个位置，以便将其与顶部对齐。我实际上是想避免这种解决方案。我唯一能想到的是将位置：相对和顶部：（desire distance）添加到（.tabs label）css元素。这将迫使我设置一个固定的高度，我还必须为.tab内容（大图像）设置一个位置，使其与顶部对齐。实际上，我希望避免这种解决方案。

.tabs {margin:0; padding:0; background:none}
.tabs input[type=radio] {display:none}
.tabs label {width:25%; display:block; float:left; text-align:center; cursor:pointer; background:none; padding:0; margin:0;}
.tabs label span {display:inline-block; padding:5px}
.tabs label span img, .tab-content img {display:block; max-width:100%; height:auto;}
.tabs label:hover img {opacity:0.8}
.tab-content {display:none; width:100%; padding:5px; box-sizing:border-box; background:none; margin:0;}
.tab-content img {margin:0 auto;}
.tabs [id^="tab"]:checked + label {background:none;}
#tab1:checked ~ #tab-content1, #tab2:checked ~ #tab-content2, #tab3:checked ~ #tab-content3, #tab4:checked ~ #tab-content4 {display:block;}
.tabs:after {content:''; display:table; clear:both}