Это веб-приложение ASP.NET, предназначенное для .NET 3.5 и использующее AJAX asp:UpdatePanel. Для моего макета страницы у меня есть несколько div с, разделяющих вертикальное пространство страницы на 5 разделов (заголовок, первый контент, второй контент, третий контент и нижний колонтитул).
Первый раздел содержимого содержит информацию об общем элементе, для которого создается страница (заголовок и некоторые свойства). Третий раздел содержит дополнительные таблицы информации об элементе страницы. А верхние и нижние колонтитулы ... ну ... верхние и нижние колонтитулы.
Второй раздел контента будет состоять из 2 подразделов, списка изображений и выбранного в данный момент изображения. Он будет работать как стандартный список миниатюр в списке, в котором вы щелкаете элемент, и текущее выбранное изображение будет обновлено до миниатюры, по которой вы щелкнули. Выбранный в данный момент подраздел изображения обернут AJAX asp.UpdatePanel и содержит заголовок, таблицу свойств и изображение, которые обновляются при изменении выбора.
Список может содержать достаточно большое количество изображений, чтобы при отображении всех отображалось много пустого пространства при увеличении размера выбранного раздела изображения.
Текущий выбранный раздел изображения будет иметь определенную высоту внутри панели обновления, которая может изменяться в зависимости от размера изображения, которое пользователь хочет просмотреть (маленький, средний, большой).
Я хочу, чтобы размер списка изображений соответствовал высоте выбранного раздела изображения с полосой прокрутки для переполнения.
Я создал простую HTML-страницу (ниже), которая определяет некоторый простой контент и div s, как мне сделать так, чтобы он выглядел как мой желаемый макет (выше)? Я пробовал разные вещи, которые я знаю об использовании плавающих и так далее, но, похоже, ничего не получилось так, как я хочу. Я бы предпочел не указывать ширину или высоту (за исключением явной высоты выбранного 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>