网页 MetroUI CSS 横跨一列两行

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

覆盖 CSS 以更改网格的边距并将图块的宽度填充到更大的网格 space available.The 调整大小现在可以完美地工作。

<!-- 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>

还有 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 横跨一列两行

Webpage MetroUI CSS span two rows on a column

html

css

layout

twitter-bootstrap

metro-ui-css