我正在使用输入，标签和广播元素处理响应式图库的唯一HTML / CSS代码（无意图javascript）。我现在就这样工作了：
.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}
我想将四个缩略图放在大图下，但似乎无法在不破坏以下元素的位置的情况下使其工作。我想避免重叠，因为我不想在图片库中设置固定高度，因为我希望有机会显示多行缩略图，而以下元素应该在整个图库之后对齐而不重叠。 / p>