Question

这是我的html代码，我希望一个接一个地显示单个div class =“box1”，当窗口大小太小而无法容纳多个框时，他们也可以在调整窗口大小时自行调整..可以有人请提供CSS代码..提前致谢..

<section id="one" class="wrapper style1">
    <div class="container1">
        <div class="row1 no-collapse-1">        
            <section class="4u"> 
                <div class="box1">
                    <h3> Skin Care </h3>
                        <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>  

            <section class="4u"> 
                <div class="box1">
                    <h3> Hair Care </h3>
                    <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>

            <section class="4u"> 
                <div class="box1">
                    <h3> Body Care </h3>
                    <a href="#" class="image featured"><img src="app/views/pages/user/images/pic01.jpg" alt=""></a>
                    <br>
                    <a href="#" class="button">Explore</a> 
                </div>
            </section>

        </div>
    </div>
</section>

的CSS：

    .container1 {
        margin-left: auto;
        margin-right: auto;

        /* width: (containers) */
        width: 1200px;
    }

    /* Modifiers */

        .container1.small {
            /* width: (containers) * 0.75; */
            width: 900px;
        }

        .container1.big {
            width: 100%;

            /* max-width: (containers) * 1.25; */
            max-width: 1500px;

            /* min-width: (containers); */
            min-width: 1200px;
        }

    /* Grid */

    .\31 2u { width: 100% }
    .\31 1u { width: 91.6666666667% }
    .\31 0u { width: 83.3333333333% }
    .\39 u { width: 75% }
    .\38 u { width: 66.6666666667% }
    .\37 u { width: 58.3333333333% }
    .\36 u { width: 50% }
    .\35 u { width: 41.6666666667% }
    .\34 u { width: 33.3333333333% }
    .\33 u { width: 25% }
    .\32 u { width: 16.6666666667% }
    .\31 u { width: 8.3333333333% }
    .\-11u { margin-left: 91.6666666667% }
    .\-10u { margin-left: 83.3333333333% }
    .\-9u { margin-left: 75% }
    .\-8u { margin-left: 66.6666666667% }
    .\-7u { margin-left: 58.3333333333% }
    .\-6u { margin-left: 50% }
    .\-5u { margin-left: 41.6666666667% }
    .\-4u { margin-left: 33.3333333333% }
    .\-3u { margin-left: 25% }
    .\-2u { margin-left: 16.6666666667% }
    .\-1u { margin-left: 8.3333333333% }


@media screen and (max-width: 1680px) {

        .container1.\31 25\25 {
            width: 100%;
            max-width: 100em;
            min-width: 80em;
        }

        .container1.\37 5\25 {
            width: 60em;
        }

        .container1.\35 0\25 {
            width: 40em;
        }

        .container1.\32 5\25 {
            width: 20em;
        }

        .container1 {
            width: 80em;
        }

    }

    @media screen and (max-width: 1280px) {

        .container1.\31 25\25 {
            width: 100%;
            max-width: 81.25em;
            min-width: 65em;
        }

        .container1.\37 5\25 {
            width: 48.75em;
        }

        .container.\35 0\25 {
            width: 32.5em;
        }

        .container1.\32 5\25 {
            width: 16.25em;
        }

        .container1 {
            width: 65em;
        }

    }

    @media screen and (max-width: 980px) {

        .container1.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.\37 5\25 {
            width: 67.5%;
        }

        .container1.\35 0\25 {
            width: 45%;
        }

        .container1.\32 5\25 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }

    @media screen and (max-width: 736px) {

        .container1.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.\37 5\25 {
            width: 67.5%;
        }

        .container1.\35 0\25 {
            width: 45%;
        }

        .container1.\32 5\25 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }

    @media screen and (max-width: 480px) {

        .container1.\31 25\25 {
            width: 100%;
            max-width: 112.5%;
            min-width: 90%;
        }

        .container1.\37 5\25 {
            width: 67.5%;
        }

        .container1.\35 0\25 {
            width: 45%;
        }

        .container1.\32 5\25 {
            width: 22.5%;
        }

        .container1 {
            width: 90% !important;
        }

    }


    .box1 {
        padding: 3em 2em;
        background: #FFF;
        text-align: center;
        border-radius: 0px 0px 6px 6px;
    }

Answer 1

我认为这需要2个不同的CSS声明，因此JavaScript需要有条件地应用它。

注意窗口的宽度并适当更改容器的CSS。我建议使用flexbox并更改/api，使其从水平布局到垂直布局。

这是jQuery：

authcBasic, role[api]

flex-direction

<div id="container">
  <div>asdf</div>
  <div>asfd</div>
  <div>asdf</div>
  <div>asdf</div>
</div>

https://jsfiddle.net/JackHasaKeyboard/9at67dhk/

当窗口大小减小时css问题

1 个答案: