用于将div超过2个div的css指南

时间:2018-04-25 09:29:03

标签: html css angular-material

我是CSS的初学者(无法正确定位HTML元素),我正在为角度应用创建一个登录表单,我正在使用材质设计。

我想创建登录页面如下, enter image description here

在我的应用程序中,我有以下代码,

<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>
  <br/>
  <mat-form-field>
    <input matInput placeholder="Textarea">
  </mat-form-field>
</div>
  

注意:我将根据示例登录中的要求修改登录详细信息   图片如上。

CSS文件如下,

.firstDiv {
    height: 40%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    background-color: orangered;
    display: inline-block;
}

.secondDiv {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60%;
    left: 0;
    right: 0;
    background-color:whitesmoke;
    display: inline-block;
}

.loginDiv {
    position: absolute;
    transform: translate(-50%, -50%);
    border: black;
    background-color:white;
    display: flex;
    flex-direction: column;
}

我无法按要求获取表单,如果屏幕尺寸减小,则登录表单根据屏幕大小不合适,登录详细信息会搞砸。

3 个答案:

答案 0 :(得分:1)

这是一个解决方案:

body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  background: #ddd;
  background-color: #23bdf5;
  background: linear-gradient(to bottom, #34b9f7 0%, #34b9f7 40%, #f0f0f0 40%, #f0f0f0 100%);
  position: relative;
  text-align: center;
  overflow: auto;
}

.center-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  right: 50px;
}

.form-element {
  height: 50vh;
  background: white;
}
<div class="container">
  <h1>Title</h1>
  <div class="center-content">
    <div class="form-element">
      this is where your form would go
    </div>
  </div>
</div>

通过执行以下操作:

首先,我为页面创建了一个.container元素,并为其添加了linear gradient背景;我使用线性渐变生成器,你可以通过谷歌搜索找到一个。接下来,我将容器元素的高度设置为100vh,这是浏览器窗口高度的100%; You can read about viewport units here

在容器中,我创建了一个.center-content元素,将内容定位为垂直.container元素中居中,并始终距离容器边缘50px,而不管屏幕尺寸,您可以将此值更改为适合您需要的值。

在这个示例中,我将包含表单的元素设置为50vh,只显示它的外观,但是您可以删除它并在元素内添加内容,然后添加填充以定义它的尺寸。 / p>

答案 1 :(得分:0)

你可以简单地在材质角度使用字体真棒图标

 <i class="fa fa-user" aria-hidden="true"></i>

答案 2 :(得分:0)

我在loginDiv的CSS中进行了以下更改所需的对齐,

.loginDiv {
    border: 1px solid black;
    background: yellow;
    left: 50%;
    position: absolute;
    top: 28%;
    transform: translate(-50%);
}