1

ラッパー div 内のリストを取得するのに助けが必要です。また、「アイテム」として持っている画像の幅が少し異なりますが、いずれにせよ解決策があると感じていますが、それを見つけることができないようです. 誰かがフェード ホバー効果のより簡単なコードを知っていれば、それが最も簡単かもしれません。jquery は、配置に問題があるだけで、ここではかなり優れています。ありがとう！

これまでの様子は次のとおりです - http://marisareviewsfilms.com/demo

これが私が望む方法です-http://marisareviewsfilms.com/lisa#

私のCSS（境界線は今のところ私を導くためのものです）：

#wrapper {
width: 827px;
height: 577px;
padding: 0px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
border: 1px solid blue;
}

.gallery li {
float: left;
margin-left: 0px;
margin-right:0px;
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
height: 577px;
display: ;
width: 129px;
position: relative;
border: 1px solid green;
}

img.grey {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.color {
position: absolute;
left: 0; 
top: 0;
}
4

3 に答える 3

2

あなたのコードは問題ないようです。ただし、ブラウザのデフォルトでは配置が乱れています。

以下を変更するだけです

  1. css の先頭で、リセット cssを適用します。
  2. clearfixクラスをul.gallery

アップデート

使用している画像スライスは131px、最初と最後のスライス (それぞれ )148pxを除いて です。 したがって、CSS でこれを変更します。151px

.gallery li {
    width: 131px;
}
.gallery li:first-child {
    width: 148px;
}
.gallery li:last-child {
    width: 151px;
}

ただし、これは最新のすべてのブラウザーで機能します。
をサポートしたい場合はIE7,8、最初と最後の にクラスを追加し、liそれに応じて css を配置します (上記のように)。

<li class="first">
...
<li class="last">

注: 緑/青の境界線はそれぞれ 1 ピクセルの幅になるため、削除してください。

于 2013-01-04T10:52:43.303 に答える
0

一部のブラウザー<ul>(.galleryここ) には 40px がありpadding-left、css リセット
で修正できます

または書くことによって

ul.gallery{
  padding-left:0;
}
于 2013-01-04T10:55:55.887 に答える
0

ここにあなたが始めるためのいくつかのことがあります：

まず、margin: 0 と padding: 0 を .gallery に追加すると、ラッパー内に配置されます。

次に、画像のエクスポート方法を変更します。湾曲した暗い背景はulの一部である必要があり、css/画像で作成できます。

次に、色付きのブロックの各列を (透明な背景で) エクスポートし、今行った方法と同じように配置します。

そうすれば、問題がはるかに少なくなります。

于 2013-01-04T10:54:48.760 に答える