Question

我的画廊盒容器中有两个单独的类。我已将其设置为使用柔性显示，但是列中没有空格。另外，它不会显示所有图片和文字。

我已经弄乱了一些证明内容属性，但这似乎没有用。我也尝试过碰运气的课程。

HTML：

<body>

    <h1>Gallery Mockup</h1>
    <div id="content">

        <!-- put your card HTML here -->
        <div class="card">
            <div id="workplease">
                <button onclick="contract_gallery()" type="button" id="close_gallery" style="display:none" align="left">&times; Close</button>
                <center>                    
                    <h2>Gallery Mockup</h2>
                </center>
            </div>
            <div id="gallerybox" class="inactive">


                <img class="pic" id="pic1" src="https://picsum.photos/230/400">
                <img class="pic" id="pic2" src="https://picsum.photos/230/400" style="display:none">
                <div class="inactive" id="gtext">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pellentesque lacus, sit amet sodales tellus porttitor sed. Donec mattis lectus in hendrerit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis id est vitae leo viverra egestas. Donec commodo, mauris ut sagittis commodo, erat erat tristique metus, at faucibus quam arcu eu metus. Duis eget metus eu arcu porttitor venenatis nec sed nibh. Sed eleifend efficitur orci. Suspendisse eu felis vitae sem varius fringilla. Aliquam erat volutpat. Integer a molestie felis, non ultricies mi. Proin facilisis commodo nisi id fermentum. Ut porttitor molestie rhoncus. Curabitur tempus volutpat mauris, eu dignissim mauris viverra quis.</p>
                    <p>Donec elementum vestibulum felis, ac commodo erat commodo a. Aenean in felis scelerisque justo ornare gravida et sed massa. Etiam in venenatis neque, accumsan volutpat sapien. Sed molestie nisl sem, ac fringilla mauris dignissim nec. Sed placerat ut elit vitae convallis. Donec iaculis efficitur tincidunt. Suspendisse mollis ut orci at maximus. Sed consectetur diam a mauris consectetur, eu sodales purus sollicitudin. Pellentesque quis tellus id est venenatis pharetra fringilla quis libero. Praesent semper, odio eu consectetur malesuada, enim felis euismod eros, in aliquam leo mi non est. Nam ornare scelerisque nisi nec gravida.</p>
                </div>
                <img class="pic" id="pic3" src="https://picsum.photos/230/400" style="display:none">
                <img class="pic" id="pic4" src="https://picsum.photos/230/400" style="display:none">
                <img class="pic" id="pic5" src="https://picsum.photos/230/400" style="display:none">
                <img class="pic" id="pic6" src="https://picsum.photos/230/400" style="display:none">
                <img class="pic" id="pic7" src="https://picsum.photos/230/400" style="display:none">
                <img class="pic" id="pic8" src="https://picsum.photos/230/400" style="display:none">


            </div>
            <center>
                <button type="button" id="gbutton" onclick="expand_gallery()">See Gallery</button>
            </center>

        </div>
    </div>
    <script src="js/final-frontier.js"></script>
</body>

CSS：

@media only screen and (max-width: 490px) {
    #gallerybox.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

当屏幕的宽度低于490px时，应该进入柔韧性视图，并且可以，但是照片之间没有间距，并且没有显示所有照片。外观如下：https://i.imgur.com/QC9PXfV.png

Answer 1

您最好的选择是将图像包装在div中，并相应地使用Flexbox。这种方法总是对我有用，我会推荐它：

您的HTML

<div class="flexbox">
    <div class="item">
        <img src=""/>
    </div>
    <div class="item">
        <img src="" />
    </div>
    <div class="item">
        <img src=""/>
</div>

您的CSS：

@media only screen and (max-width: 490px) {
    .flexbox  {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        width: 100%; //take full width
    }

    .item img {
        width: 100%; //set 100% width
        height: auto; //auto height adjustment
    }
}

如何从两个单独的类中固定伸缩间距

1 个答案: