Question

如何在支持IE11和所有主流浏览器时使用此图表？

Flexbox似乎不支持动态高度。

我是否必须为lg视口设置左/右列而不为xs视口设置列？

<div class="container">
   <div id="box1" class="box">box1</div>`
   <div id="box2" class="box">box2</div>`
   <div id="box3" class="box">box3</div>`
   <div id="box4" class="box">box4</div>`
   <div id="box5" class="box">box5</div>`
</div>

Answer 1

正如我的评论所述，您可以使用媒体查询渲染两者并根据当前屏幕尺寸仅显示一个布局。

示例黑客实施：

＆＃13;

<html>

<head>
    <style>
        .container {
            width: 100%;
        }

        .row {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            width: 100%;
        }

        .column {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .item {
            width: 100%;
            border: solid 1px #dadada;
            border-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media screen and (max-width: 600px) {
            .desktop-only{
                display: none;
            }
            .column{
                width: 100%;
            }
        }

        @media screen and (min-width: 601px) {
            .mobile-only{
                display: none;
            }
            .column{
                width: 50%;
            }
        }

        .item-1 {
            height: 200px;
        }

        .item-2 {
            height: 400px;
        }

        .item-3 {
            height: 250px;
        }

        .item-4 {
            height: 300px;
        }

        .item-5 {
            height: 350px;
        }
    </style>
</head>

<body>
    <div class="desktop-only">
        <div class="container">
            <div class="row">
                <div class="item item-1">1</div>
            </div>
            <div class="row">
                <div class="column">
                    <div class="item item-3">3</div>
                    <div class="item item-5">5</div>
                </div>
                <div class="column">
                    <div class="item item-2">2</div>
                    <div class="item item-4">4</div>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-only">
        <div class="container">
            <div class="column">
                <div class="item item-1">1</div>
                <div class="item item-2">2</div>
                <div class="item item-3">3</div>
                <div class="item item-4">4</div>
                <div class="item item-5">5</div>
            </div>
        </div>
    </div>
</body>

</html>

＆＃13;

断点设置为600px。将窗口宽度更改为高于和低于600px，以查看布局＆＃34;更改＆＃34;

2列网络到1列移动设备，带有动态高度框

1 个答案: