2

ウェブサイトには、アイテムのリストがあります。<article>これらの各アイテムには、次のようにタグ内に追加する写真または名前があります。

<article class="client-card">
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p>
</article>

これは、テストへのフィドル リンクです。おそらく画像は機能しません: http://jsfiddle.net/9wQg3/

これらの写真のそれぞれの横に、ボタンになる虫眼鏡のボタンを追加したいと思います。このボタンには「このアイテムの詳細情報」というテキストも表示されますが、拡大鏡のみを表示し、残りのボタンは<article>タグの後ろに隠しておきたいと思います。アイテムは行に配置され、各行には 3 つのアイテムがあり、各ページに 6 つのアイテムが表示されます。<div class="clear"></div>各記事は左にフロートされるため、各行は a で終わります。これはコードです：

<article class="client-card">
    <p><img width="211" height="106" src="./img/ftm1.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/fluid.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/chemical.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<div class="clear"></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/alcmelgar.png" class="post-image" alt="ftm" title="ftm" /></p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p>COLOMBIAN PRESERVED FLOWERS</p>
</article><div class="more-info"><a href="#">More information</a></div>
<article class="client-card">
    <p><img width="211" height="106" src="./img/fit.png" class="post-image" alt="ftm" title="ftm" /></p>
<div class="clear"></div>

そして、これは私のスタイルシートです:

div.client-list article.client-card{
    width: 288px;
    height: 130px;
    background: transparent url(images/bg-client-card.png) no-repeat scroll center;
    float: left;
    margin-left: 24px;
    margin: 20px 0px 0px 24px;
/*  position: relative; */
}
div.client-list article.client-card p{
    line-height: 110px;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    color: #030303;
    font: normal 14px/110px "FuturaLtBTLight", Arial;
}
div.client-list div.more-info{
    width: 290px;
    height: 24px;
    line-height: 24px;
    background: #ea1571;
    float: left;
    margin: 20px 0px 0px 0px;
    position: relative;
    top: 0px;
    left: -290px;
/*  display: none; */
}

わかりました、そのコードを使用すると、次の結果が得られます。 ここに画像の説明を入力

ご覧のとおり、行が間違っているように見え、そのうちの 4 つだけに「詳細情報」リンクが表示されています。テストに使用するコードをいくつか残しました。

タグ内に挿入するだけでなく、cssのさまざまな代替手段を試しましたが、何も機能しません。何が間違っているのか、それを修正する方法を教えてください。(含まれている div の最大幅が 1000px であることを指摘するのを忘れていました)。

4

1 に答える 1

1

  1. 配置：

    <div class="more-info"><a href="#">More information</a></div>
<a href="#" class="more-info-control">magnyfying glass</a>

    記事タグ内

  2. cssの変更：

    div.client-list article.client-card{
    position: relative;
}

div.client-list div.more-info{
    width: 290px;
    height: 24px;
    line-height: 24px;
    background: #ea1571;
    position: absolute;
    top: 0px;
    left: -1px;
    display: none;
}

    重要なのは、article.client-cardがposition：relativeであるということです。
    div.more-infoは記事の中にあり、 position：absoluteです。

    このように、div.more-infoには、ブラウザウィンドウの左上隅ではなく、最も近い親の相対要素（この場合はarticle.client-card）の左上隅に0,0の参照ポイントがあります。左の値は、より多くの情報divを配置できます。

  3. 次に、jqueryを使用して、「詳細」divを表示するタイミングを制御できます（サンプルコードのみ）

    $jq("more-info-control").click(function(event) {
     $jq("div.more-info", $jq(this).parent()).show();
});
于 2012-09-21T09:43:11.790 に答える