CSS - 绝对定位和流体宽度

时间:2014-05-22 16:50:46

标签: css css-position absolute fluid-images

我在图片旁边放了一个div,它是一个帖子列表。右侧div在项目符号列表中保存有关该特定帖子的信息。 div不是完全流畅的,但在某些断点处会改变宽度。 div我希望图像的最小高度始终是相同的大小。在div内部和底部之间的图像内容,filigre我想在div的顶部和底部显示。

我可以让框延长图像的长度和位置:相对于底部图像,所以它是流动的或者我可以将图像定位在div中的绝对位置:position:relative。但这会破坏流动性。

我可以同时拥有两个吗?

这是我的小提琴: http://jsfiddle.net/4Kyye/1/

和css:

* {
    box-sizing: border-box;
}

.specials-module-inside {
margin: 30px auto 30px auto;
width: 720px;
overflow: auto;
}

.absolute {
    position:absolute;
    bottom: 5px;
}

h3 {
text-align: center;
margin-bottom: 20px;
color: #231f20;
font-family: steelfish, helvetica, arial, sans-serif;
font-size: 30px;
letter-spacing: 3px;
text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -2px 2px 0px #d9c09e;
}

.info-box-small {
float: right;
margin: 0;
padding: 5px;
width: 286px;
color: #231f20;
border: 1px solid #5a5655;
min-height: 220px;
position: relative
}

.full-width-image {
width: 100%;
}    

1 个答案:

答案 0 :(得分:0)

解决了它。显然它是一个错误,但是如果你在你的CSS中相对定位html标签,那么它的流量和绝对定位在父容器中。