我正在制作一个图片预览容器,位于此页面的页面底部:
http://cowperthwaite.dev.mybusinessadmin.com/location/51447
在底部,您可以看到缩略图图像有一个滚动条,因为它可以超出父容器的高度。这很好,并按预期工作。
我遇到的问题是我需要左侧的大图像始终保持在视图中,即使向下滚动也是如此。换句话说,我需要它保持相对于其父div的静态 - 总是在黄色框内 - 而缩略图有一个滚动区域。
我尝试过各种position:_______
变种无济于事,我觉得我在这里错过了一些更高的概念。我也不确定我想要完成的事情是否可能。
有人会介意提供一些见解吗?提前致谢
编辑:derp,没有提供我的代码......HTML:
<div class="pictureBoxContainer">
<div class="pictureBox">
<div class="pBoxLeftColumn">
<?php
echo "<div class='pBoxLargeImageContainer'>";
echo "<img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'>";
echo "</div>";
?>
</div>
<div class="pBoxRightColumn">
<?php
foreach ($pictureLinks as $picture)
{
echo "<div class='pBoxSmallImageContainer'>";
echo "<img src='$picture' alt='Thumbnail' class='pBoxSmallImage'>";
echo "</div>";
}
?>
</div>
</div>
</div>
CSS:
.pictureBoxContainer {
padding: 12px;
clear:left;
clear:right;
width: 100%;
background-color: #F7D961;
border-radius: 12px;
max-height: 350px;
}
.pictureBox {
background-color: #FFF;
border-radius: 12px;
width: 97%;
overflow: auto;
padding: 12px;
max-height: 300px;
}
.pBoxLeftColumn {
display: block;
float: left;
min-width: 49.99%;
max-width: 49.99%;
overflow: auto;
}
.pBoxRightColumn {
display: block;
float: right;
min-width: 49.99%;
max-width: 49.99%;
overflow: auto;
}
.pBoxSmallImageContainer {
height: 103px;
width: 145px;
float: left;
padding: 3px;
margin: 3px;
background-color: #F7D961;
border-radius: 2px;
position: relative;
}
.pBoxSmallImage {
max-height: 95px;
max-width: 138px;
margin: auto;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.pBoxLargeImageContainer {
width: 100%;
}
.pBoxLargeImage {
border-radius: 6px;
min-width: 450px;
max-height: 300px;
position: static;
}
答案 0 :(得分:1)
将position: relative
添加到pictureBoxContainer
div,并将样式设置为pBoxLeftColumn
div:
.pBoxLeftColumn {
display: block;
left: 25px;
max-width: 49.99%;
min-width: 49.99%;
position: absolute;
top: 25px;
}
答案 1 :(得分:0)
将大img
放入div
,将缩略图放在单独的div
中,然后添加overflow-y:auto;
,并为缩略图div
添加{{1} }}
注意:使用height
时,如果您移除了一些拇指以使它们不超过高度,滚动条将会消失。
答案 2 :(得分:0)
.pBoxLeftColumn {
display: block;
float: left;
min-width: 49.99%;
max-width: 49.99%;
overflow: auto;
position:absolute;
margin-top:0px;
}
我想这就是你想要的?