0

我的网站上有图像的缩略图。这是它的外观：
在此处输入图像描述

让我们考虑第二行。有两张图片（总是两张图片），我想让第二张图片向右对齐。
我怎样才能做到这一点？

这是我想要的示例：
在此处输入图像描述

这是html代码：

<div class="navigation_container">
            <div id="dpthumbs0" class="navigation">
                <a href="#" class="pageLink prev"></a>
                <ul style="opacity: 1;" class="thumbs">
                        <li class="selected" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#1">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=571437e8-ecfc-46f4-a14f-a645428fae46-pic_172.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#2">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=5ef5e802-916a-4ede-af11-c90274c63218-pic_176.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#3">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=fa6f5671-b9f6-48e6-a822-cea83424643c-pic_178.jpg">
                        </a></li>   
                        <li class="" style="opacity: 1;"><a rel="history" title="image" class="thumb" href="#4">
                            <img height="60px" style="height: 58px; max-width: 79px;" src="/Image/GetImage?imageName=10b628ed-387e-43b5-908b-80b92efb7d2b-pic_180.jpg">
                        </a></li>   
                </ul>
                <!-- .thumbs-->
                <a href="#" class="pageLink next"></a>
            </div>
            <!-- .navigation-->
        </div>

这都是CSS：

.navigation_container {
    float: right;
    margin: 15px 0;
    padding: 30px 0;
    position: relative;
}
.navigation {
    height: 275px;
    overflow: hidden;
    width: 175px;
}
.slider .thumbs {
    width: 175px;
}
.thumbs li {
    float: left;
    padding: 4px 0 4px 8px;
}
.thumbs li img {
    border: 1px solid #424D55;
    height: 58px;
    max-width: 79px;
}

谢谢。

4

3 回答 3

3

您必须创建两个类并像这样定义：

CSS

.left{
 float:left;
 clear:left;
}
.right{
 float:right;
 clear:right;
}

HTML

<li class="left"></li>
<li class="right"></li>
<li class="left"></li>
<li class="right"></li>
于 2012-04-16T04:55:01.437 回答
2

将此添加到您的 CSS 代码中

.thumbs li.alt {
    float: right;
    padding: 4px 8px 4px 0px;
}

将 .alt 类添加到每 2 个 li，使用模板引擎的 for 循环或类似的东西:)。这样，将来如果您决定关闭正确的对齐方式，您只需修改 1 个 css 类。

<li class="">...</li>   
<li class="alt">...</li>
于 2012-04-16T05:01:18.630 回答
0

这些 css 规则都没有改变 html 嵌入图片的对齐方式，使其落在内部的右侧

<ul>

标签...

于 2016-02-04T06:08:26.847 回答