2

画像が上下にジグザグになるように余白を交互にしようとしています。この記事に近いものを見つけましたが、1 つの変更をすべての .brochureImg クラスに適用しました。私は何を間違っていますか？

HTML

<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a>
            <li class="brochureImg first"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        </li>
    </ul>
</div>

CSS

.brochureImg {
    display: inline-block;
    margin: 0 auto;
    margin-top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg a img:nth-child(odd) {
    margin-top: -120px;
}

.brochureImg a img:nth-child(even) {
    margin-top: -60px;
}

.brochureImg.first {
    margin-left: 125px;
}
4

6 に答える 6

3

OK、いくつか問題がありました。

<li>まず、要素がネストされているため、html の形式が適切ではありませんでした。どのように修正したかについては、以下の例を参照してください。

第二に、あなたの css 属性はあなたが望んでいたものではなかったと思います。代わりに、margin-top必要だと思いますtop。position: relativeこれは、またはの最も近い親に対してアイテムを配置する場所を意味しますposition: absolute。

第三に、CSSnth-childセレクターが間違っていました。セレクターは、nth-childあなたがそれを置いたアイテムに適用されます。タグは常に最初の<img>子であるため、代わりにタグでそれが必要であると推測しました<li>。

最後に、小さな便利さ: :nth-child(2)css に入れることができるセレクターもあるので、インデントしたい要素にクラスfirst(おそらくあまり良い html クラス名ではない)を追加する必要はありません。<li>

私はこれがあなたが望んでいたものだと思います

.brochureBrand {
    position: relative
}

.brochureImg {
    display: inline-block;
    top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg:nth-child(odd) {
    top: -120px;
}

.brochureImg:nth-child(even) {
    top: -60px;
}

.brochureImg:nth-child(2) {
    margin-left: 125px;
}
<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
    </ul>
</div>

お役に立てれば！

于 2015-07-16T15:48:09.313 に答える
2

:nth-child 疑似セレクターは、同じレベルで一致する要素のスコープに適用されます。
セレクターの機能を見てみましょう.brochureImg a img:nth-child(odd)。

  • まず、同じレベルにあるすべての<li>要素に一致します。.brochureImg
  • しかし、それは深くなり、<a>すべての内部を選択します<li>
  • そしてついに<img>中に突入。

ここで、このレベルの img では、:nth-child(odd)明らかに奇数としてカウントされる 1 つの画像 (すべてのリンクに 1 つの画像のみが存在する) に適用されます (1 つだけ = 最初)。他のすべてのli、imgにも同じことが言えます。配置している要素をヒット<li>するには、次のようなセレクターを使用する必要があります。

    .brochureImg:nth-child(even) {
        top: -60px;
    }

ところで、最初の<li>要素にタイプミスがあります-閉じられていません:)

.brochureImg {
    display: inline-block;
    margin: 0 auto;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg:nth-child(odd) {
  top: 20px;
}

.brochureImg:nth-child(even) {
  top: 60px;
}
    <ul>
        <li class="brochureImg first"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
    </ul>

于 2015-07-16T15:46:30.330 に答える
1

多分これがあなたの答えです

.box {
    display: inline-block;
    float: left;
    margin-left: 10px;
    background: black;
    width: 100px;
    height: 150px;
}

.box:nth-child(odd) {
    margin-top: 30px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

于 2015-07-16T15:46:19.987 に答える
0

最初に、その中の画像ではなく、li をターゲットにする必要があります。また、内側の li は、独自の ul で囲む必要があります。この場合、マージントップがうまく機能しないことがわかりました。top と position relative を使用する必要があります。

 li:nth-child(odd){
     position:relative;
     top: -120px;
 }

li:nth-child(even) {
    position:relative;
    top: -60px;
}
于 2015-07-16T15:52:50.957 に答える