如果它在这种情况下有所不同,我正在使用Twitter Bootstrap。我试图使用词缀,但这允许元素突破父级。
假设我在页面上有一个项目列表。每个项目的布局如下:
<h3>Item name</h3>
<div class = "row">
<div class = "col-md-10">
<figure>
<img src = "/assets/img/image.jpg" class = "img-responsive" />
</figure>
</div>
<div class = "col-md-2" style = "text-align: center">
<div class = "content">
<p>Tip about this picture</p>
</div>
</div>
</div>
我希望包含p元素的div在用户滚动时向下移动,类似于固定位置div,但在到达父容器的末尾时停止,所以我不会在图像时继续看到div它描述不再在屏幕上。我尝试过固定定位,固定定位在绝对定位内,以及Twitter Bootstrap的词缀功能。它们都允许物品破坏收容。有没有办法在没有javascript的情况下执行此操作?
答案 0 :(得分:1)
使用HTML和CSS相当容易:http://jsfiddle.net/ZCuRq/。
HTML:
see fiddle
CSS:
*, :before, :after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 10px;
}
body p + p,
.container + p {
margin-top: 20px;
}
.container > .content {
width: 80%;
outline: 2px solid rgba(200, 200, 200, 0.5);
}
.container:before {
content: "This shows dynamic usage of fixed positioning";
display: none;
}
.container:hover:before {
position: fixed;
display: block;
width: 15%;
right: 10px;
top: 10px;
outline: 2px solid #bbb;
padding: 10px;
font: normal 10px/2 Sans-Serif;
background-color: #fff;
}
答案 1 :(得分:0)
您可以尝试将父div
设置为position:relative
,将父div中的元素设置为position:absolute
。您可以使用div
,top
,bottom
和right
在父left
内调整元素的位置。
示例:
div.parent {
position: relative;
}
div.parent div.element {
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: center;
}
答案 2 :(得分:-2)
试试这个: -
p {
overflow : auto;
}
div.content {
position : relative;
}