聚合物

Question

我正在使用Polymer构建应用程序。我发现布局系统很棘手。目前，我正在尝试布局一些按钮，使它们看起来像这样：

+----------------------------------------------------------------+
|                   [ok]                   [more info]  [cancel] |
+----------------------------------------------------------------+

＆＃34; ok＆＃34;左边的差距按钮是页面整个宽度的25％。剩余的75％用于按钮。为了构建上述内容，我将this plunk放在一起，其中包含以下代码：

<paper-toolbar class="statusbar">
  <div style="width:25%;"></div>
  <div style="width:75%;" class="fit">
    <div class="layout horizontal flex" style="padding-bottom:12px;">
      <paper-button raised>OK</paper-button>

      <div class="flex"></div>
      <paper-button raised>More Info</paper-button>                            
      <paper-button raised>Cancel</paper-button>                                
    </div>
  </div>
</paper-toolbar>

出于某种原因，＆＃34; 25％＆＃34;左边的填充不是。我不明白为什么。

Answer 1

建议使用border来查看您尝试使用div块构建的内容。我将margin:1px solid green添加到您的25%和margin:1px solid yellow添加到75％div区块，这是您目前所拥有的。

我利用Flexbox layout with iron-flex-layout

更改了您的代码

以下是更新plunkr

<paper-header-panel class="flex" mode="seamed">
  <paper-toolbar>
    <div>Hello</div>
  </paper-toolbar>

  <div class="fit content">
    <div style="height:100%;">
      Hello World
    </div>
  </div>

  <paper-toolbar class="statusbar">

    <div class="layout horizontal flex" style="width:100%">
      <div class="layout vertical flex-1 center center" style="border:1px solid green">
        <paper-button raised>OK</paper-button>
      </div>
      <div class="layout horizontal flex-4 " style="border:1px solid yellow">
        <span class="flex"></span> 
        <!-- take all space-->
        <paper-button raised>More Info</paper-button>
        <paper-button raised>Cancel</paper-button>
      </div>
    </div>

  </paper-toolbar>
</paper-header-panel>