グリッドとして表示したいWebページのデータリストがあります。古典的には、私は<table>
を使ってこれを行ったかもしれませんが、データは意味論的な表形式ではないので、固定数の列を持つ理由はありません(セルが自動的に折り返して、変更)。罫線崩れのあるHTMLグリッドレイアウト
表示要素をdisplay: inline-block
に設定し、width
に設定することでこれを行うことができます。これは私がレイアウトの点で欲しいものです。しかし、それはまた、border
を設定したいときに問題を引き起こします。境界線は要素間で倍増し、外側では1つだけ表示されます。
テーブルを使用していた場合は、border-collapse: collapse
と設定しても問題ありません。しかし、これはinline-block
ソリューションでは何もしないようです。
inline-block
の連続する要素の境界をどのように崩壊できますか?またはこれを可能にするグリッドレイアウトを作成する他の方法がありますか?
これが役立つことがあります。ボーダーのために
、あなたは影からそれらを描き、それらをオーバーラップするように、負のマージンを追加することができインラインブロック要素](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) –