0

シームレスなフォト グリッドの作成に問題があります。かなり長い間インターネットを検索しましたが、解決策が見つかりません。

すべて正方形で、すべて同じサイズの画像のグリッドがあります。追加することで、すべての行で発生するギャップを排除しましたimg { vertical-align: middle; }

ここで、各列に発生する垂直方向の空白を削除する必要があります。

取り組んでいるサイトはこちら

ここに私が取り組んでいるサイトのスクリーンショットがあります

画像の左右に約 2 ～ 3 ピクセルの余白があることがわかります。私は考えられるほぼすべてのことを試してみmargin:0ました。padding:0

を使用してグリッドを設定しましたdisplay:inline-block。私はこれを維持する必要があります。フロートは使いたくない。

私の HTML はとてもシンプルです。

<ul><li><a href="#"><img src="0.jpg" /></a></li></ul>
4

5 に答える 5

2

これを実行して、各列に表示される垂直方向の空白を削除します。

#photos li img { width: 102% }

例えば：

ここに画像の説明を入力

于 2012-04-04T05:12:51.797 に答える
0

幅のcolumns.css行101を削除します

于 2012-04-04T05:09:16.550 に答える
0

フロートを使いたくないのはなぜですか？これが私が提案するものです：

ul { overflow: auto; width: XXXpx; }

li {
  float: left;
  width: XXXpx;
  margin: 0px;
  padding: 0px;
  outline: 0px;
}



<ul>
  <li><a href="#"><img src="img1.jpg" alt=""></a></li>
  <li><a href="#"><img src="img2.jpg" alt=""></a></li>
  <li><a href="#"><img src="img3.jpg" alt=""></a></li>
</ul>
于 2012-04-04T05:10:33.743 に答える
0

Thank so much for the quickest response I've ever seen at stackoverflow.

I made a silly mistake though. Since I am using inline-block I forgot that it accounts for whitespace in the HTML. I removed all of the whitespace, and now it seems to work.

@MartinCortez's answers seems to work as well, if I didn't want to fool with whitespace.

于 2012-04-04T16:47:08.223 に答える
0

これが少し遅れていることはわかっていますが、他の人が役立つと思うかもしれないので、私がやろうとしていることを共有したいと思いました.

@davecave が言ったように、これは空白の問題ですが、HTML の空白を削除することは必ずしも理想的ではありません。

包含要素では、通常は次のことを行います。

#container {
    letter-spacing: -4px;
    word-spacing: -4px; 
}

インラインブロックのアイテムで値をリセットします。

.item {
    letter-spacing:0;
    word-spacing:0;
}
于 2013-01-11T09:20:20.893 に答える