Div左侧的可滚动列表
这是针对.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>
1 个答案:
答案 0 :(得分：1)
像这样：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>
希望这有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？