Question

我正在尝试学习Google聚合物，但我似乎在简单的事情上失败了......

我目前有一个抽屉和一个标题栏的主页，如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <!-- 1. Load platform.js for polyfill support. -->
  <script src="bower_components/platform/platform.js"></script>

  <!-- 2. Use an HTML Import to bring in the element. -->
  <link rel="import"
  href="bower_components/core-header-panel/core-header-panel.html">
  <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
  <link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
  <link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
  <link rel="import" href="bower_components/core-menu/core-menu.html">
  <link rel="import" href="bower_components/paper-item/paper-item.html">
  <link rel="import" href="big-picture.html">

  <link rel="stylesheet" type="text/css" href="style/main.css">

</head>
<body unresolved touch-action="auto">

  <core-drawer-panel>

    <div drawer id="drawer">
      <core-menu id="drawermenu">
        <paper-item class="menulink">Home</paper-item>
        <paper-item class="menulink">Gallery</paper-item>
        <paper-item class="menulink">Calendar</paper-item>
        <paper-item class="menulink">Contact</paper-item>
      </core-menu>
    </div>

    <div main>
      <core-header-panel mode="seamed">
        <core-toolbar>
          <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
          <h1 id="title">Test</h1>
        </core-toolbar>
        <div id="pagecontent">
          <big-picture></big-picture>
        </div>
      </core-header-panel>
    </div>

  </core-drawer-panel>

</body>
</html>

我试图创建一个将直接显示在标题栏下方的图片元素，我希望图片填满剩余的屏幕空间，但也有一定的高度。后来我希望这些图片能够自动更改。我的造型似乎都不起作用，我的图片元素看起来像这样：

<link rel="import" href="bower_components/polymer/polymer.html">

<polymer-element name="big-picture">

<template>
    <style>

    :host
    {
        height: 100px;
    }
    #crop
    {
        position: relative;
    }
    #mainpictop
    {
        position: absolute;
    }
    #mainpicbottom
    {
        position: absolute;
    }
    </style>

    <div id="crop">
        <img id="mainpictop" src="img/main/1.jpg"></img>
        <img id="mainpicbottom" src="img/main/2.jpg"></img>
    </div>

</template>
<script>
Polymer({});
</script>
</polymer-element>

Answer 1

常见问题是没有设置页面布局。容器元素通常需要明确地调整大小。我会建议这样的事情：

<body fullbleed vertical layout unresolved touch-action="auto">
  <core-drawer-panel flex>

fullbleed使身体适合视口而没有边距。 vertical layout提供了body flex-box布局功能。 flex上的core-drawer-panel会使其适合身体。

此外，默认情况下，所有自定义元素都是display: inline（这是DOM / CSS规则，而不是Polymer＆＃39; s）。要在元素上设置尺寸，您需要将其设为block或inline-block。

:host
{
    display: block;
    height: 100px;
}

聚合物绝对图像位置

1 个答案: