HTML
1<button id="clickButton" class="buttonStyle" onclick = "doSomething();">click me</button> 2 3<div class="wrapper"> 4 <div class="box" style = "background: #ccc"></div> 5 <div class="box" style = "background: yellow" id ="none" ></div> 6 <div class="box" style = "background: #000"></div> 7 <div class="box" style = "background: #f00"></div> 8 <div class="box" style = "background: #0f0"></div> 9 <div class="box" style = "background: #00f"></div> 10</div>
JavaScript
1function doSomething() { 2 var none = document.getElementById('none'); 3 none.style.display = "none"; 4}
CSS
1.wrapper{ 2 font-size:0; 3 width: 960px; 4 margin: 0 auto; 5 6} 7.box{ 8 display: inline-block; 9 width: 310px; 10 height: 320px; 11 background-color: red; 12 margin-right: 15px; 13 margin-bottom: 15px; 14} 15.wrapper > .box:nth-child(3n){ 16 margin-right: 0px; 17}
上記のコードだと、ボタンを押すと、二番目が非表示になります。
(実際は絞り込み機能に使用したいので、どのボックスが消えるかわからないものとしたいです。)
非表示後に、レイアウトが崩れてしまいます。:nth-child(3n)が非表示後の三番目に適応されないからです。
非表示後に適応する方法はございますでしょうか?アドバイスよろしくお願いいたします。
補足: display: inline-boxを使用しているのは、職場のサービスが使用しているので、同じ状況にしました。
追記
非表示後には、要素を詰めるようにしたいです。
今の状況だと、二番目が消え、要素が詰めるようになっていますが、
三番目にmargin-right: 0pxを適応しているため、四番目との間がなくなってしまいます。
回答1件
あなたの回答
tips
プレビュー