Question

我正在尝试使用MetroUI制作一个网格，其中它是Windows地铁图块格式的3列。第一列有两个垂直堆叠的宽瓷砖。第二列是一个大型瓷砖转盘。然后第三列再次是垂直堆叠的两个宽瓷砖。此代码确实看起来不错，但在调整浏览器大小时，它会重叠磁贴和轮播。铺设这个的正确方法是什么？也尝试使用Bootstrap网格，但后来获得了很大的利润。

<div class="container main-tiles-2">
<div class="tile-area no-padding">
    <div class="tile-container bg-color-tile-light-pantone" style="width: 100%">
        <div class="flex-grid">
            <div class="row cells3 cell-auto-size">
                <div class="tile-container no-padding" style="width: 28%">
                    <div class="tile-wide bg-darkBlue fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-calendar"></span>
                            <span class="tile-label">Calendar</span>
                        </div>
                    </div>
                    <div class="tile-wide bg-orange fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-users"></span>
                            <span class="tile-label">Room Bookings</span>
                        </div>
                    </div>
                </div>
                <div class="cell tile-large ol-transparent" data-role="tile">
                    <div class="tile-content">
                        <div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
                             data-controls="false">
                            <div class="slide">
                                <img src="images/main%20image.jpg" data-role="fitImage"
                                     data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                            <div class="slide">
                                <img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                            <div class="slide">
                                <img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
                                     alt="Picture of the Day One">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tile-container no-padding" style="width: 33%">
                    <div class="tile-wide bg-darkTeal fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-list2"></span>
                            <span class="tile-label">News</span>
                        </div>
                    </div>

                    <div class="tile-wide bg-cobalt fg-white" data-role="tile">
                        <div class="tile-content iconic">
                            <span class="icon mif-books"></span>
                            <span class="tile-label">Staff Contacts</span>
                        </div>
                    </div>
                </div>

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

像这样它看起来并没有很好地调整大小：

Answer 1

This was solved by using the trusted bootstrap layout grids depending on how many tiles you want. The overriding the CSS to change the margins for bootstrap grids and also filling the width of the tiles to a larger size of the grid space available.The resize works perfectly now.

<!-- First row of tiles -->
<div class="container">
<div class="row">
    <div class="col-md-4 col-xs-12 my-column">
        <div class="tile-wide bg-darkBlue fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-calendar"></span>
                <span class="tile-label">Calendar</span>
            </div>
        </div>
        <div class="tile-wide bg-orange fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-users"></span>
                <span class="tile-label">Room Bookings</span>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-12 my-column">
        <div class="tile-large ol-transparent" data-role="tile">
            <div class="tile-content">
                <div class="carousel" data-role="carousel" data-height="100%" data-width="100%"
                     data-controls="false">
                    <div class="slide">
                        <img src="images/main%20image.jpg" data-role="fitImage"
                             data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                    <div class="slide">
                        <img src="images/scenery1.jpg" data-role="fitImage" data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                    <div class="slide">
                        <img src="images/scenery2.jpg" data-role="fitImage" data-format="fill"
                             alt="Picture of the Day One">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-xs-12 my-column ">
        <div class="tile-wide bg-darkTeal fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-list2"></span>
                <span class="tile-label">News</span>
            </div>
        </div>

        <div class="tile-wide bg-cobalt fg-white" data-role="tile">
            <div class="tile-content iconic">
                <span class="icon mif-books"></span>
                <span class="tile-label">Staff Contacts</span>
            </div>
        </div>
    </div>
</div>

And the CSS

.row {
  padding-bottom: 0px;
  padding-top: 0px;
  margin: 0px;

}
.my-column {

  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 2px;
  padding-left: 1px;
}


/**
Overrides Metro UI Css
*/
.tile-large {
  width: 99%;
  font-size: 20px;
  font-family: "Helvetica Neue";

}

.tile-wide {
  width:99%;
  font-size: 20px;
  font-family: "Helvetica Neue";
}

.tile {
  width: 99%;
  font-size: 20px;
  font-family: "Helvetica Neue";
}

网页MetroUI CSS在列上跨越两行

1 个答案: