[英]Responsive design using Css
我想对我的应用程序中的弹出通知进行响应式设计。我正在使用Angular Toaster进行通知。
例如,我将烤面包机容器元素放置在屏幕中央,但是使用了绝对位置,因此对于较小的屏幕,通知会停留在同一位置,因此不会显示。 我想相对于包含它们的父元素(在这种情况下为容器网格)进行通知。 如何使用CSS实现该目标? 这是我的html代码:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
还有我用于toaster-container元素的自定义css规则:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
您可以使用宽度/高度和顶部/左侧值的百分比使div与其容器相关。 您在此处使用的百分比将与父容器的大小有关 。 因此,如果将您的父容器设置为width:300px
而将您的孩子设置为width:50%
则将以width:150px;
渲染该孩子width:150px;
相对定位,就是标签上所说的-将元素相对于其他元素定位。 因此,您还需要将元素设置为position:relative;
这是我的处理方法:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto
将子元素在其容器中水平居中 width
是父容器的30% height
,好吧,我只想将其设置为固定的px
值,但您也可以在此处完全定义%
您可以将容器更改为:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
通常,这是将水平绝对元素居中的好方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.