Question

我正在一个网站上工作，我想在左边放一张幻灯片，一些文字描述右边的幻灯片。目前，我使用flexbox和一些绝对定位的图像进行幻灯片放映。我还在我的内容周围使用div来提供框架。但是，div不会环绕元素的整个高度，使图像溢出帧。是否可以让div完全环绕幻灯片图像，同时只在CSS中提供最大和最小宽度？

这是我目前所拥有的：

HTML：

<div class="container">
    <div class="content">
        <div class="slides">
            <img src="http://placehold.it/2048x1365">
            <img src="http://placehold.it/2048x1365">
        </div>
    </div>
    <div class="content">
        <p>This is some content.</p>
        <p>This is some more content.</p>
        <p>This is some more content.</p>
        <p>This is some more content.</p>
    </div>
</div>

CSS：

.container {
    display: flex;
    justify-content: center;
    margin: 30px;
}
.content {
    background: red;
    flex: auto;
    flex-direction: column;
    min-width: 30em;
    max-width: 38em;
    padding: 10px;
    margin: 5px;
}
.slides {
    position: relative;
    width: 100%;
    height: 100%;
}
.content img {
    width: 100%;
    height: auto;
    position: absolute;
    display: block;
}

jsfiddle：http://jsfiddle.net/vuz9wzx5/2/

Answer 1

图像的position: absolute会影响布局，因为它会将其从元素流中拉出来，因此您无法以您想要的方式利用flexbox。我会：

要么只能以编程方式显示在图像上
仅显示使用CSS的第一张图片

我对选项二做了一些修改和建议： http://jsfiddle.net/vuz9wzx5/2/

<强>更新

如果你需要对图像进行绝对定位，你需要像这个小提琴一样修复图像容器的高度：

http://jsfiddle.net/vuz9wzx5/3/

如何使Flexbox容器环绕绝对定位的内容？

1 个答案: