如何使用 CSS 将 jQuery div 对齐到左下角？答案

【问题标题】：How to align jQuery div to bottom left corner using CSS?如何使用 CSS 将 jQuery div 对齐到左下角？
【发布时间】：2014-06-21 07:48:02
【问题描述】：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: 1000 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

我正在使用 Jquery modal popup 。一直以来，当我尝试在我的 asp.net 页面上打开它时，它显示在中间，但我想在左下角打开它。试过了，没有解决。

这是我在 Jquery 中所做的：

$j(function() {
    $j("#dialog").dialog({
        title: "Warning",
        buttons: {}
    });
});

<div id="dialog" style="display: none;left:0;bottom:0;">
    * Invalid Username
</div>

我想将 div 与左下角的对话框对齐。怎么做？

谢谢。

【问题讨论】：

这不是“jquery div”。这是一个你碰巧用 jquery 操作的 div。仅仅因为您使用的是 jquery 并不会让它有任何神奇的不同 - 您可以像放置任何其他 div 一样定位它......编写适当的 css。
马克这不是我要问你的家庭作业问题。我问过它是因为没有找到解决方案。我之前使用的 css 是 div left:0;bottom:0 的样式，我也试图将 div 保留在另一个 div 中并将上面的 css 应用到它，但它确实有效。请如果你能...提供一个答案。感谢您的帮助。
我没有说这是一个家庭作业问题。但这与任何其他 css 定位问题没有什么不同。
所以请你帮帮我
试试这个<div id="dialog" style="bottom:0;position:absolute;" >

标签： jquery asp.net css

【解决方案1】：

$j(function() {
    $j("#dialog").dialog({
        title: "Warning",
        position: [0, 600],
        buttons: {}
    });
});

通过写 position:[0,600] 我解决了它。

【讨论】：