Div左侧的可滚动列表

最后发布: 2011-11-09 19:54:32


问题

这是在面向.NET 3.5并使用AJAX asp:UpdatePanel的ASP.NET Web应用程序中。 对于我的页面布局,我有几个div将页面的垂直空间分为5个部分(页眉,第一内容,第二内容,第三内容和页脚)。

在此处输入图片说明

第一个内容部分包含有关为页面生成的整体项目的信息(标题和某些属性)。 第三部分包含有关页面项目的其他信息表。 页眉和页脚是...好...页眉和页脚。

第二个内容部分将包含2个子部分,图像列表和当前选择的图像。 单击列表中的缩略图时,它将像标准缩略图列表一样工作,并且当前选择的图像将更新为单击的缩略图。 当前选择的图像子部分由AJAX asp.UpdatePanel包装,并包含标题,属性表和图像,这些图像在选择更改时都会更新。

该列表可以包含足够多的图像,以便在全部显示时,将所选图像部分推得更大,将会产生很多空白。

当前选择的图像部分将在更新面板中具有定义的高度,该高度可以根据用户要查看的图像大小(小,中,大)进行更改。

我想要的是将图像列表调整为选定图像部分的高度,并带有用于溢出的滚动条。

我已经创建了一个简单的HTML页面(下面),该页面定义了一些简单的内容和div ,如何使其看起来像我想要的布局(上面)? 我已经尝试过使用浮动和其他方法进行的各种尝试,但是似乎并没有出现我想要的方法。 我希望不必指定宽度或高度(选定图像div的显式高度除外),并尽可能使内容自动调整为其内容。

<html>
    <head>
        <style type="text/css">
html, body {
    margin: 0px;
    padding: 0px;
}

div {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    padding: 5px;
    margin: 5px;
}

div.image {
    background-color: red;
    color: white;
    text-align: center;
}

#page-header {
    padding: 10px;
    height: 60px;
    background-color: green;
    color: white;
}

#page-footer {
    padding: 10px;
    height: 20px;
    background-color: green;
    color: white;
}

.section {
}

#first-section {
}

#second-section {
}

#second-section-scroll-list {
    overflow-y: scroll;
    //display: inline-table;
}

ul.scroll-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li.scroll-list-item {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    text-align: center;
    //display: table;
}

#second-section-content {
    //display: inline-table;
}

#third-section {
}
        </style>
    </head>

    <body>
        <div id="page-header"><h2>My Page!<h2></div>

        <div id="first-section" class="section">
            <h1>The Item To Display</h1>
            <table>
                <tr>
                    <th>Property 1:</th>
                    <td>Value</td>
                </tr>
                <tr>
                    <th>Property 2:</th>
                    <td>Value</td>
                </tr>
            </table>

        </div>

        <div id="second-section" class="section">
            <div id="second-section-scroll-list">
                <ul class="scroll-list">
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
                        Image 1 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
                        Image 2 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
                        Image 3 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
                        Image 4 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
                        Image 5 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
                        Image 6 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
                        Image 7 Description
                    </li>
                    <li class="scroll-list-item">
                        <div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
                        Image 8 Description
                    </li>
                <ul>
            </div>

            <div id="second-section-content">
                <!-- This will be wrapped in an AJAX update panel -->
                <div style="height: 800px; background-color: lightgray;">
                    <h2>Selected List Item</h2>
                    <table>
                        <tr>
                            <th>Property 1:</th>
                            <td>Value</td>
                        </tr>
                        <tr>
                            <th>Property 2:</th>
                            <td>Value</td>
                        </tr>
                    </table>
                    <div class="image" style="height:480;width:640;">Image of Selected Item</div>
                </div>
            </div>
        </div>

        <div id="third-section" class="section">
            <table>
                <tr>
                    <th>First</td>
                    <th>Second</td>
                    <th>Third</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>A</td>
                    <td>1A</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>B</td>
                    <td>2B</td>
                </tr>
            </table>
        </div>

        <div id="page-footer">End of My Page...</div>
    </body>

</html>
html css html-table
回答

像这样: http : //blueclick.ca/projects/stackoverflow/divpanels.html

CSS:

  html, body {
    margin: 0px;
    padding: 0px;
}

div {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    padding: 5px;
    margin: 5px;
}

div.image {
    background-color: red;
    color: white;
    text-align: center;
}

#page-header {
    padding: 10px;
    height: 60px;
    background-color: green;
    color: white;
}

#page-footer {
    padding: 10px;
    height: 20px;
    background-color: green;
    color: white;
}

.section {
}

#first-section {
}

#second-section {
    margin-left:auto; margin-right:auto; display:block;
}

#second-section-scroll-list {
    overflow-y: scroll;
    height:750px;
    float:left;
}

ul.scroll-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li.scroll-list-item {
    border-color: black;
    border-style: solid;
    border-width: 1px; 
    text-align: center;
}

#second-section-content {
margin-left:250px;
height:750px
    }

#third-section {
}

HTML:

  <div id="page-header"><h2>My Page!</h2></div>

    <div id="first-section" class="section">
        <h1>The Item To Display</h1>
        <table>
            <tr>
                <td>Property 1:</td>
                <td>Value</td>
            </tr>
            <tr>
                <td>Property 2:</td>
                <td>Value</td>
            </tr>
        </table>

    </div>

    <div id="second-section" class="section">
        <div id="second-section-scroll-list">
            <ul class="scroll-list">
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 1</div><br/>
                    Image 1 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 2</div><br/>
                    Image 2 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 3</div><br/>
                    Image 3 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 4</div><br/>
                    Image 4 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 5</div><br/>
                    Image 5 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 6</div><br/>
                    Image 6 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 7</div><br/>
                    Image 7 Description
                </li>
                <li class="scroll-list-item">
                    <div class="image" style="height: 120px; width: 160px;">Image 8</div><br/>
                    Image 8 Description
                </li>
            </ul>
        </div>

        <div id="second-section-content">
            <!-- This will be wrapped in an AJAX update panel -->
            <div style=" height: 725px; background-color: lightgray;">
                <h2>Selected List Item</h2>
                <table>
                    <tr>
                        <th>Property 1:</th>
                        <th>Value</th>
                    </tr>
                    <tr>
                        <td>Property 2:</td>
                        <td>Value</td>
                    </tr>
                </table>
                <div class="image" style="height:480;width:640;">Image of Selected Item</div>
            </div>
        </div>
    </div>
<br>

    <div id="third-section" class="section">
        <table>
            <tr>
                <th>First</th>
                <th>Second</th>
                <th>Third</th>
            </tr>
            <tr>
                <td>1</td>
                <td>A</td>
                <td>1A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>B</td>
                <td>2B</td>
            </tr>
        </table>
    </div>

    <div id="page-footer">End of My Page...</div>

希望这可以帮助。