Html 我想在纸张对话框中对齐末端的按钮

我有一个固定大小的

纸张对话框

，我想对齐一个末端包含按钮的

。

纸张对话框

包含一个

标题

，

纸张选项卡

，用于控制下面的

铁页

。

iron页面

包含该按钮

<style is="custom-style">
    paper-dialog {
                width: 1000px;
                height: 585px;
    }
</style>

<paper-dialog>
    <header>Header</header>
    <paper-tabs selected="{{selected}}>
        <paper-tab> tab1</paper-tab>
        <paper-tab> tab2</paper-tab>
    </paper-tabs>
    <iron-pages selected="{{selected}}">
        <div id="tab1" container class="container layout vertical">
            <div> Text section tab1</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
        <div id="tab2" container class="container layout vertical">
            <div> Text section tab2</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
    </iron-pages>
</paper-dialog>

纸张对话框{
宽度：1000px；
身高：585px；
}
标题
下一个
文本部分选项卡2
我解决了我的问题。问题是按钮的每个父类都必须使用所有剩余的空间。因此，向每个父类添加
flex
。然后添加
end
，将按钮放置在底部

<style is="custom-style">
    paper-dialog {
                width: 1000px;
                height: 585px;
    }
</style>

<paper-dialog class="flex layout vertical">
    <header>Header</header>
    <paper-tabs selected="{{selected}}>
        <paper-tab> tab1</paper-tab>
        <paper-tab> tab2</paper-tab>
    </paper-tabs>
    <iron-pages class="flex layout vertical" selected="{{selected}}">
        <div id="tab1" container class="container flex layout vertical">
            <div> Text section tab1</div>
            <div class="flex></div>
            <div class="layout horizontal end">
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
        <div id="tab2" container class="container layout vertical">
            <div> Text section tab2</div>
            <div class="flex></div>
            <div>
                <paper-button id="toBeAlignedAtTheBottom">next!</paper-button>
            </div>
        </div>
    </iron-pages>
</paper-dialog>


纸张对话框{
宽度：1000px；
身高：585px；
}
标题
下一个
文本部分选项卡2
你能分享你正在使用的对话框的链接吗？我的意思是一些到你的代码的实时链接，在那里我可以看到发生了什么？尝试向你的父按钮元素添加一个class
divclass=buttons
。也许对你有帮助。