-3 
<div class="oringal">
    <ul class="rank">
<li class="rank-1">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
    <p>1</p>
</li>
<li class="rank-2">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
    <p>2</p>
</li>

次のようにランキング シーケンスを取得したいのですが、html を変更したくありません。次のようにランキング シーケンスを取得するために div.oringal の css を変更するにはどうすればよいですか。

jsfiddle ページhttp://jsfiddle.net/6grsm/1/で完全なコードを参照してください。

4

2 に答える 2

0

絶対配置を使用してみてください。ショッピング カートのレイアウトを作成しているように見えるので、最初はかなり構造化されたページがあると思います。

フィドルでデモを参照してください: http://jsfiddle.net/audetwebdesign/rC59T/

あなたのHTMLは基本的にこれです：

<div calss="panel-wrap">
<ul  class="rank">
    <li class="rank-1">
        <img ... />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img ... />
        <p>2</p>
    </li>
    <li class="rank-3">
        <img ... />
        <p>3</p>
    </li>
</ul>
</div>

CSS の場合:

.panel-wrap {
    width: 460px; 
}

.panel-wrap背景画像などを追加したい場合に便利です。

ul.rank {
    list-style: none outside none;
    padding: 0;
    margin: 0;
    position: relative; /* this will force the li to be positioned with respect
                           to this block level container */
    border: 1px solid gray;
    height: 200px;
}
ul.rank li {
    width: 150px;
    top: 0;           /* pin top and bottom so that the li fills in the height
                         of the parent container */
    bottom: 0;
    border: 1px solid red;
    position: absolute;
}
ul.rank img {
    width: 150px; 
    xheight: 90px; /* Careful not to adjust both width and height which could
                      distort your images */
}
ul.rank p {
    border: 1px dotted blue;
    text-align:center;
    position: absolute;
    bottom: 10px;
    left: 0;    /* pin left and right so the p fills in the 
                   width of the li... */
    right: 0;
    margin: 0;
}

トリックは、各リスト項目の左オフセットを均一な間隔で調整することです:

.rank-3 {
    top: 0;
    left: 0;
}
.rank-1 {
    top: 0;
    left: 160px;
}
.rank-2 {
    top: 0;
    left: 320px;
}

大きな利点

あなたができることは、JavaScript/jQuery を使用して左オフセットを動的に設定し、ユーザーがボタンをクリックして一連のカタログ アイテムをスクロールできるインタラクティブなページを作成することです。

于 2013-06-10T11:06:51.187 に答える
0

「シーケンス 3 1 2 を取得したいのですが、div.original の html のシーケンスを変更したくありません。私の質問は、css をどのように変更すればよいかということです」

そのコメントから、実際には要素の配置を変更するのではなく、番号付けの順序を変更することであると思われますが、これはまったく別の質問です。これを行う最も簡単な方法は、タグの (非推奨ですが、まだサポートされているように見える)start属性を使用することです。olCSS では、タグを設定することもできcounter-incrementますli。これにより、li タグの表示内容をカスタマイズできます。さまざまな方法の例は、この Stackoverflow の回答にあります

于 2013-06-10T10:58:45.443 に答える