Question

我可能会完全错误，但尝试创建一个网页，其中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小提琴是否起作用，设法让第一点工作，但不能结束。这只是因为我们不知道屏幕有多大？

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

Answer 1

好的，抱歉，我很傻，材料设计仍然不知道高度，所以这样做的方法是设置高度（你可以使用javascript和window）来设置高度为900px（{ {1}}下面的内容，一旦完成，就可以了。

style="height: 900px;"

将左上角和右下角与材质设计对齐

1 个答案: