隣接する要素のみのCSS境界

Question

インラインテーブルまたはインラインブロック表示スタイルの複数のdivがあります。

ウィンドウ幅に応じて、1行あたりのdiv数が変化します。

高解像度では、より多くのdivが各行に収まります。

要素が互いに接触する境界線のみを表示することはできますか？

n番目のセレクタは最後の要素の右端を削除できますが、各行に最後に表示された要素がわからない限り削除できます。

また、最後の行に収まる要素の境界線のみを削除することはできますか？

私は、行ごとに固定数の要素を持つソリューションを探しているわけではありません。私は、行ごとに動的な要素数を持つレイアウトで動作するソリューションを探しています。

Answer 1

それぞれのdivでmax-widthを指定し、divのget wrappedが表示されている画面サイズに同じn番目のスタイルを書きます。divは追加/削除されるたびに異なる解像度のメディアクエリを意味します。

Answer 2

誰にでも役立つ場合は、ここで使用されている解決策では、オーバーフロー：非表示のコンテナを使用して、最初の行と最初の列の要素の上余白と左余白を隠していました。

.thumb { display: inline-table; margin-top: -1px; margin-left: -1px; width: 170px; height: 170px; border: 1px solid #EEE; border-width: 1px 0 0 1px; } 

<div class="col" style="padding-left:0; overflow:hidden;"> 
<div class="thumb"></div> 
<div class="thumb"></div> 
<div class="thumb"></div> 
etc 
</div>