1

私が構築している私のサイトへのリンクは次のとおりです。

http://joshrcook.com/test

Firefoxの列を台無しにすることなく、写真を上下に動かすのに苦労しています。画像を左にフロートさせることはできますが、それは -moz-column-count を壊すようです。何か案は？

写真のhtmlは以下です。

<div id="img-wrapper">
    <?php for($i = 1; $i <=25; $i++) { ?>
    <div class="photo">
        <a href="#"><img src="img/arrow_up_alt1_32x32.png" class="overlay overlay1" /></a>
        <a href="#"><img src="img/fullscreen_32x32.png" class="overlay overlay2" /></a>
        <a href="#"><img src="img/heart_fill_32x38.png" class="overlay overlay3" /></a>
        <?php echo '<img src="img/tumblr_img_' . $i . '.jpg" class="main_photo" />'; ?>
    </div>
    <?php } ?>

</div>

CSS は次のとおりです。

 #img-wrapper {
  width: 960px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.photo {
  width: auto;
  position: relative;
  width: 320px;

}

.photo a img.overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

.photo a img.overlay1 {
  left: 25%;
}

.photo a img.overlay2 {
  left: 45%;
}

.photo a img.overlay3 {
  left: 65%;
}

.photo img.main_photo {
  width: 320px;
  border-radius: 10px;
}
4

1 に答える 1

1 
.photo {
  width: auto;
  position: relative;
  width: 320px;
  margin-bottom: -5pt;
}

上記はChrome（リリース）とIE9でうまく機能するようです。このマシンでテストする他のブラウザーはありませんが、そこから始めます。

また、ブラウザが空白を解釈する方法が原因である可能性もあります (マージン/パディングはすべて 0 に設定されているように見えるため、問題は発生しないはずです<div class="photo"></div>。

于 2012-10-27T23:40:11.927 に答える