Question

我的页面上有2列...我的问题是，如果浏览器大小变小，我希望在左栏下面叠加正确的列。我使用角度材料，但不介意使用自定义样式来解决这个问题。任何帮助将不胜感激。

HTML：

<div layout="row" layout-align="center center" flex>
    <section layout="row">
      <div id="nav" flex="20" layout="column" layout-align="space-around">
        <md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
      </div>
      <div id="content" flex>
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
      </div>
    </section>
  </div>

CSS：

.datepickerdemoBasicUsage md-content {
    padding-bottom: 200px; }

.datepickerdemoBasicUsage .validation-messages {
    font-size: 11px;
    color: darkred;
    margin: 10px 0 0 25px; }

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
  overflow: hidden !important;
}

ButtonBar.setButtonData(Button, ButtonData)

Answer 1

您父母layout="column" layout-gt-xs="row"

上的此类内容

<div ng-app="sandbox">
  <div>
    <section layout="column" layout-gt-xs="row">
      <div id="nav" flex>
        <md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
      </div>
      <div id="content" flex>
        <h2>Right Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
      </div>
    </section>
  </div>
</div>

这表示将子元素堆叠成一列。然后，如果浏览器宽度大于或等于xs（＆gt; = 600px），则将子元素组成一行。

Fiddle

如果浏览器大小很小，则堆栈列

1 个答案: