将左上角和右下角与材料设计对齐答案

【问题标题】：Align top left and bottom right with material design将左上角和右下角与材料设计对齐
【发布时间】：2015-11-27 18:14:04
【问题描述】：

我可能完全弄错了，但尝试创建一个网页，其中 div 1 位于左上角，div 2 对齐右下角（或末端）。我想使用材料设计以正确的方式做到这一点。我想要这样（对不起ASCII艺术，但它很酷）

_____________33____50________________
|            |                       |
|    1       |                       |
|            |      _________________| 33
-------------|      |                |
|                   |        2       |
|                   |                |
|                   |                |
--------------------------------------
                    50

这是到目前为止的代码，但问题是我可以让它影响第一列的对齐，但我不能在两个 div 上独立设置它们

<md-content layout="column" layout-fill>
    <div layout="column" flex="33"><H1>Welcome to My page</H1>
    </div>
    <div layout="row" layout-align="end end" flex="33">
        <div layout="column" layout-align="end end" flex="50">
                 <H3>Welcome to  my page</H3>
        <p>This is my page, there are many like it <bold>But this page is mine</bold></p>

        <ul>
            <li>
                My page is my best friend
            </li><li>
                I must master its code
            </li><li>
                like I must master my life
            </li>
        </ul>
        </div>
    </div>
</md-content>

不确定 JS fiddle 是否有效，设法让第一个部分工作，但无法完成。这只是因为我们不知道屏幕有多大吗？

这是一个简单的 JS 小提琴，Material Design 正在工作，我可以让 flex 工作，但不能让 align https://jsfiddle.net/p02Ls1dh/3/

【问题讨论】：

标签： material-design

【解决方案1】：

好吧，对不起，我傻了，material design 还是不知道高度，所以方法是设置高度（可以使用javascript和window）设置高度为900px（style="height: 900px;"下面），一旦完成它就可以工作了。

<md-content layout="column" layout-fill style="height: 900px">
    <div layout="column" flex="33"><H1>Welcome to My page</H1>
    </div>
    <div layout="row" layout-align="end end" flex="33">
        <div layout="column" layout-align="end end" flex="50">
                 <H3>Welcome to  my page</H3>
        <p>This is my page, there are many like it <bold>But this page is mine</bold></p>

        <ul>
            <li>
                My page is my best friend
            </li><li>
                I must master its code
            </li><li>
                like I must master my life
            </li>
        </ul>
        </div>
    </div>
</md-content>

【讨论】：