WEB-страница MetroUI CSS охватывает две строки в столбце

Question

Я пытаюсь создать сетку, где это 3 столбца в формате плитки окон, используя MetroUI. Первая колонка имеет две широкие плитки, уложенные вертикально. Вторая колонка - большая карусель. Затем третий столбец снова состоит из двух широких плиток, уложенных вертикально. Этот код выглядит хорошо, но при изменении размера браузера он перекрывает плитки и карусель. Каков правильный способ проложить это? Также попробовали с сеткой 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 для изменения полей для загрузочных сеток, а также для заполнения ширины плиток до большего размера доступного пространства сетки. Размер теперь отлично работает.

<!-- 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"; 
}