-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

“我想得到序列 3 1 2，但我不想在 div.original 中更改 html 中的序列，我的问题是，我应该如何更改 css ”

从那条评论看来，您实际上不是改变元素的位置，而是改变编号的顺序，这是一个完全不同的问题。最简单的方法是使用标签的（已弃用，但似乎仍受支持）start属性。ol在 CSS 中，您还可以设置counter-increment标签li，这将启用自定义 li 标签显示的内容。各种方法的示例在这个 Stackoverflow 答案中

于 2013-06-10T10:58:45.443 回答
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 回答