0

我是初学者，所以我相信这很容易。我正在尝试复制下面的图像，其中左侧列表/链接是固定的，因此当您向下滚动图像时它会保持原位（我也可能添加第三列作为固定描述）。我尝试使用float: left;链接和图像（我也尝试float: right;使用图像），但是一旦我放置position: fixed;链接，它会自动将图像移动到最左边或最右边。

容器为 960 像素（链接为 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

您可以创建一个包含两列的表格，并使 div（右侧的一个）可滚动。

<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 回答
0

position: fixed从 DOM 流中删除应用它的元素。如果您知道页面左侧总会有 220px 的间距，那么您可以简单地为imagesdiv 添加 220px 的边距：

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

也可以看看：

于 2012-05-30T01:40:56.553 回答