如何使用固定的“nav”制作2列体布局

Question

我是初学者，所以我确信这很简单。我正在尝试复制下面的图像，其中左侧列表/链接是固定的，因此当您向下滚动图像时它会保持在原位（我可能也会为固定描述添加第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;
}

Answer 1

您可以创建一个包含两列的表，并使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>

Answer 2

position: fixed从DOM流中删除应用它的元素。如果您知道页面左侧总会有一个220px的装订线，那么您只需向images div添加220px的边距：

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

另见：

• The quirks mode page on position
• The full browser compatibility mode chart on caniuse.com