0

我想为我的应用程序中的弹出通知做一个响应式设计。我正在使用 Angular Toaster 作为通知。

例如，我将 toaster-container 元素定位在屏幕的中心，但使用的是绝对位置，因此对于较小的屏幕，通知会保持在同一位置，因此不会显示。我想让通知相对于包含它们的父元素（在本例中为容器网格）。如何使用 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;
}
4

2 回答 2

1
  • 使用百分比而不是像素

您可以使用宽度/高度和顶部/左侧值的百分比来使您的 div 与其容器相关。您在此处使用的百分比将与父容器大小有关。因此，如果您的父容器设置为width:300px并且您的子容器设置为，width:50%则子容器将呈现在width:150px;

  • 对元素使用相对定位。

相对定位，正如它在标签上所说的那样——它相对于其他元素定位元素。所以你还需要将元素设置为position:relative;

以下是我将如何解决这个问题：

.toast-container-custo{
  position: relative;
  margin: 0 auto;
  width: 30%;
  height:30px;
}
  • margin:0 auto将其容器内的子元素水平居中
  • width现在是父容器的 30 %
  • ，height好吧，我只是更喜欢将其设置为固定px值，但您也可以%在这里使用
于 2015-01-21T12:10:04.153 回答
0

您可以将容器更改为：

.toast-container-custo{
    position: absolute;
    top: 100px;
    margin-left: auto;
    float: none;
    margin-right: auto;
    left: 0;
    right: 0;
}

通常，这是将绝对元素水平居中的好方法。

于 2015-01-21T12:15:18.267 回答