Я пытаюсь получить сетку из 8 изображений, чтобы заполнить всю ширину страницы, используя количество столбцов и медиа-запросы, но с указанием 5 или 6 столбцов справа есть пустой столбец.
Это также происходит:
При использовании 9 или 10 изображений не работают 6 столбцов При использовании 11 изображений не работают 5 столбцов
Любые подсказки приветствуются, спасибо
body { margin: 0; font-family: Tahoma, sans-serif; font-size: 23px; } html{ background-color: grey; } .imgcontainer { line-height:0; column-gap:0px; column-width: 100px; background:rgba(0, 50, 150, 0.3); } .myimg { width: 100% !important; height: auto !important; background:white; } .txt{ position: absolute; padding: 15px; } #textid1 { background: pink; display:none; } #textid2 { background: yellow; display:none; } #textid3 { background: cyan; display:none; } #textid4 { background: grey; display:none; } #textid5 { background: red; display:none; } #textid6 { background: green; display:none; } @media screen and (max-width: 1000px) { .imgcontainer { column-count: 6; }/**/ #textid1 { display:none; } #textid2 { display:none; } #textid3 { display:none; } #textid4 { display:none; } #textid5 { display:none; } #textid6 { display:block; } } @media screen and (max-width: 900px) { .imgcontainer { column-count: 5; }/**/ #textid1 { display:none; } #textid2 { display:none; } #textid3 { display:none; } #textid4 { display:none; } #textid5 { display:block; } #textid6 { display:none; } } @media screen and (max-width: 800px) { .imgcontainer { column-count: 4; }/**/ #textid1 { display:none; } #textid2 { display:none; } #textid3 { display:none; } #textid4 { display:block; } #textid5 { display:none; } #textid6 { display:none; } } @media screen and (max-width: 700px) { .imgcontainer { column-count: 3; } #textid1 { display:none; } #textid2 { display:none; } #textid3 { display:block; } #textid4 { display:none; } #textid5 { display:none; } #textid6 { display:none; } } @media screen and (max-width: 600px) { .imgcontainer { column-count: 2; } #textid1 { display:none; } #textid2 { display:block; } #textid3 { display:none; } #textid4 { display:none; } #textid5 { display:none; } #textid6 { display:none; } } @media screen and (max-width: 500px) { .imgcontainer { column-count: 1; } #textid1 { display:block; } #textid2 { display:none; } #textid3 { display:none; } #textid4 { display:none; } #textid5 { display:none; } #textid6 { display:none; } }
<div id="wrapper"> <div id="textid1" class="txt">1 column</div> <div id="textid2" class="txt">2 columns</div> <div id="textid3" class="txt">3 columns</div> <div id="textid4" class="txt">4 columns</div> <div id="textid5" class="txt">5 columns</div> <div id="textid6" class="txt">6 columns</div> <div id="container"> <div id="contentwide"> <div class="imgcontainer"> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> <img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/> </div> </div> </div>