0

私は初心者なので、これは簡単だと思います。下の画像を複製しようとしています。左のリスト/リンクが固定されているため、画像を下にスクロールしても位置がずれません (固定の説明のために 3 列目を追加することもできます)。float: left;リンクと画像の両方に使用してみました（画像にも試しfloat: right;ました）がposition: fixed;、リンクを配置すると、画像が自動的に左端または右端に移動します。

コンテナーは 960px (リンク用に 220、画像用に 420、説明用に 320) です。

HTML

<div class="container">
    <div id="about">
        <ul id="print_list">
            <li><a href="eff.html"><span style="color: #b13c19">Earth Friendly
                      Foods </span> </a></li>
            <li> <a href="tmad.html"> Trivedi Museum of Art and Design </a></li>
            <li> <a href="amitpandya.html"> Amit Pandya, DDS </a></li>
            <li> <a href="posterillos.html"> Posters & Illustrations </a></li>
            <li> <a href="banners.html"> Banners </a></li>
            <li> <a href="movieposters.html"> Movie Posters </a></li>
            <li> <a href="greetingcards.html"> Greeting Cards </a></li>
        </ul>
        <div class="images">
            <img src="images/portfolio/tmad1.jpg" width="420px" height="308" alt="
                           Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad2.jpg" width="420px" height="315" alt="
                           Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad3.jpg" width="420px" height="315" alt="
                           Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad4.jpg" width="420px" height="315" alt="
                          Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad5.jpg" width="420px" height="315" alt="
                          Trivedi Museum of Art and Design" />
        </div>
    </div>
</div>

CSS (一部の要素を誤用した可能性があることはわかっているので、ご容赦ください)

#about {
    float: left;
    width: 960px;
    margin-top: 50px;
    padding-bottom: 30px;
    border: 1px solid;

}

#print_list {
    position: fixed;
    float: left;
    width: 220px;
    margin: 0;
    padding: 0 10px 0 0;
    border-right: 1px solid #bbb;
}

#print_list li {
    list-style-type: none;
    margin:5px 0 0 0;
    text-align: right;
}

#print_list a, #print_list a:link, #print_list a:visited, #print_list a:active {
    color: #666;
    text-decoration: none;
}

#print_list a:hover {
    color: #b13c19;
}

.images {
    float: right;
    right: 20px;
    width: 420px;
    margin: 0;
    padding: 0 5px 0 5px;
}
4

2 に答える 2

0

position: fixed適用先の要素を DOM フローから削除します。ページの左側に常に 220 ピクセルの余白があることがわかっている場合は、imagesdivに 220 ピクセルの余白を追加するだけです。

.images {
    /* Your declarations go here */
    margin-left: 220px;
}

以下も参照してください。

于 2012-05-30T01:40:56.553 に答える
0

2 つの列を持つテーブルを作成し、div (右側の 1 つ) をスクロール可能にすることができます。

<table>
    <tr>
    <!-- First column -->  
    <td>
        <ul id="print_list">
            <li> <a href="eff.html"> <span style="color: #b13c19"> Earth Friendly
                  Foods </span> </a></li>
            <li> <a href="tmad.html"> Trivedi Museum of Art and Design </a></li>
            <li> <a href="amitpandya.html"> Amit Pandya, DDS </a></li>
            <li> <a href="posterillos.html"> Posters & Illustrations </a></li>
            <li> <a href="banners.html"> Banners </a></li>
            <li> <a href="movieposters.html"> Movie Posters </a></li>
            <li> <a href="greetingcards.html"> Greeting Cards </a></li>
        </ul>
    </td>

    <!-- Second column -->
    <td>
        <div class="images" style="overflow: scroll;">

            <img src="images/portfolio/tmad1.jpg" width="420px" height="308" alt="
                       Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad2.jpg" width="420px" height="315" alt="
                       Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad3.jpg" width="420px" height="315" alt="
                       Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad4.jpg" width="420px" height="315" alt="
                      Trivedi Museum of Art and Design" />
            <img src="images/portfolio/tmad5.jpg" width="420px" height="315" alt=" 
        </div>
    </td>
    </tr>
</table>
于 2012-05-30T01:02:12.227 に答える