Question

想象两个并排的盒子。右边一个是浮动的，固定宽度是一个照片，左边是文本，所以任何剩余的宽度都填充到容器的左边缘。

如果我调整大小（压缩）浏览器，我希望左侧框中的文本流畅。好到目前为止一切都那么好......

这是困难的部分：我需要左侧容器的最小宽度，所以当达到时，文本框停止缩小，右侧照片框开始在左侧框下滑动，直到它消失。这可能吗？

任何帮助表示赞赏！

Answer 1

您可以与定位重叠z-index，但不能浮动。你必须做这样的事情：

代码和内联说明：

.leftbox {
    position: relative; /* stay sort of in the document flow */
    z-index: 2; /* be positioned at level 2 */
    min-width: 200px; /* minimum width at which to stop getting smaller */
    margin-right: 200px; /* catering for that right column */
    background-color: rgba(155, 155, 255, 0.8); /* slightly transparent so we can see the right box go 'underneath' it */
}

.rightbox {
    position: absolute; /* remove from the document flow */
    right: 0; /* sit where we want it to */
    top: 0; /* sit where we want it to */
    z-index: 1; /* be positioned at level 1, so below level 2 */
    width: 200px; /* set a width */
    background-color: rgba(255, 155, 155, 0.8); /* uhh, colours are nice */
}

并排框：如何在下面制作一个幻灯片？

1 个答案: