0

私のサイトには画像のサムネイルがあります。これはどのように見えるかです：
ここに画像の説明を入力

2行目を考えてみましょう。2 つの画像 (常に 2 つの画像が並んでいます) があり、2 番目の画像が右に配置されるようにしたいと考えています。
これどうやってするの？

これは私が欲しいものの例です:
ここに画像の説明を入力

これは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

2 つのクラスを作成し、そのように定義する必要があります。

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 番目ごとに追加し、テンプレート エンジンの for ループなどを使用します :)。このようにして、将来、正しい配置をオフにすることにした場合、1 つの css クラスを変更するだけで済みます。

<li class="">...</li>   
<li class="alt">...</li>
于 2012-04-16T05:01:18.630 に答える