Question

我已经使用Materialize CSS框架创建了以下布局： Link

.child-grid:nth-child(odd) {
    padding-right: 10px;
    padding-left: 0px;
}

.child-grid:nth-child(even) {
    padding-right: 0px;
    padding-left: 10px;
}
.row .grid-item-left {
    padding-right: 20px;
}

.row .grid-item-right {
    padding-left: 20px;
}
.grid-item img {
    display: block;
    max-width: 100%;
}
.grid-item-right .row , .grid-item-left .row{
  margin-bottom: 8px;
}

<div class="container">
  <h3 class="center-align section-title">Destinations</h3>
  <div class="row">
    <div class="col s6 m6 l6 grid-item-left">
      <div class="row">
        <img src="http://source.unsplash.com/1200x500/?usa" alt="" class="responsive-img">
      </div>
      <div class="row">
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?uk" alt="" class="responsive-img">
        </div>
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?canada" alt="" class="responsive-img">
        </div>
      </div>
    </div>
    <div class="col s6 m6 l6 grid-item-right">
      <div class="row">
        <div class="col s12 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?germany" alt="" class="responsive-img">
        </div>
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?france" alt="" class="responsive-img">
        </div>
      </div>
      <div class="row">
        <img src="http://source.unsplash.com/1200x500/?italy" alt="" class="responsive-img">
      </div>
    </div>
  </div>
</div>

并且一直试图使用UIKIT CSS框架（版本3.0.0-rc.17）创建相似的布局，但是我无法创建相似的布局。如何使用UIKIT获得所需的布局：Link

Answer 1

在您的代码中，问题是与材料示例相比，您将行和列弄乱了，请查看下面的工作片段，该片段遵循材料链接示例的结构。希望对您有帮助：）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.17/css/uikit.min.css">

<div class="uk-container">
  <h2 class="uk-heading-line uk-text-center"><span>DESTINATION</span></h2>
  <div class="uk-grid-collapse uk-child-width-1-2 uk-child-height-1-2 uk-grid" uk-grid="">
    <div class="uk-first-column">
      <div><img src="http://source.unsplash.com/620x243/?india" alt="" class="uk-padding-small"></div>
      <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
        <div class="uk-first-column uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?nepal" alt="">
        </div>
        <div class="uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?africa" alt="">
        </div>
      </div>
    </div>
    <div>
      <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
        <div class="uk-first-column uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?usa" alt="">
        </div>
        <div class="uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?usa" alt="">
        </div>
      </div>
      <div><img src="http://source.unsplash.com/1200x500/?fiji" alt="" class="uk-padding-small"></div>
    </div>
  </div>
</div>

使用UIKIT创建网格布局

1 个答案: