0

LessCSS を使用して、単純なメトロ テーマの Web サイトを作成しています。variables.less ファイルには次のものがあります。

@unit: 30px;
@tileMargin: 2px;

これは私のmixins.lessにあります：

.tile(@xDim, @yDim, @color){
    display: inline-block;
    margin: @tileMargin;
    width: @xDim * @unit + 2 * (@xDim - 1) * @tileMargin;
    height: @yDim * @unit + 2 * (@yDim - 1) * @tileMargin;
    .gradient-bottom-right(@color);
}

.tile-container(@width, @height){
    margin: 0;
    padding: 0;
    height: @height * @unit + 2 * (@height - 1) * @tileMargin + 2 * @tileMargin;
    width: @width * @unit + 2 * (@width - 1) * @tileMargin + 2 * @tileMargin;
}

要素のマージンがあっても、単位正方形の倍数が適切なサイズを維持することを保証するため。しかし、実際にこれを 2 つの 5x5 タイルと 10x5 タイルでテストすると、タイル間に奇妙な間隔ができてしまいます。

エラーの例 (わかりやすくするためにコンテナーに境界線を追加しました):

これらのボックス間の距離は 2 ピクセルを大幅に超えています

inline-block ステートメントを削除すると、タイルは互いに正しい間隔で配置されますが、親 div との関係が正しくなくなり (親から抜け出して)、当然のことながら互いに隣り合う必要がなくなります。この迷惑なスペースを削除するにはどうすればよいですか? フロートは絶対に避けたいです。

編集: この同じ問題が Firefox で発生することを確認しました。

4

1 に答える 1

0

inline-blockDOM にあるテキスト ノードを尊重します (div 間にスペースがあります)。要素をスペースなしで隣り合わせに配置してみてください。

于 2013-09-23T01:18:43.867 に答える