使用 jQuery.UI CSS 框架进行 DIV 样式设置
我目前正在开发的一个项目的一些小部件使用了 jQuery UI 框架。 为了给用户提供全局的外观和感觉，我想将该框架也用于它的 CSS 内容。
我目前正在实现一个类似主页的仪表板，用户可以在其中看到其数据的整体状态。 该仪表板由一些应对齐到网格布局的 div 构建。
我尝试像下面这样设置 div 的样式
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
稍后我想实现一些可拖动和可排序的功能。
我现在面临的问题是盒子没有正确对齐。
有没有人有关于使用 jQuery.UI 进行此类 css 工作的提示？ 我正在 jqueryui.com 上研究 CSS 框架文档，但没有那么多信息。
最好的问候，
戈登
a Project I am currently working on uses the jQuery UI framework for some of its widgets.
To provide the user with a global look and feel I would like to use the framework also for its css stuff.
I am implementing at the moment a dashboard like homepage, where the user can see an overall status of its data. This dashboard is build of some divs that should be aligned into a grid layout.
I try to style the divs like follows
<div class="ui-widget">
<div class="ui-widget-header">Box Header</div>
<div class="ui-widget-content">
Content of the Box
</div>
</div>
Later I would like to implement some draggable-and-sortable functionality.
The Problem I am facing right now is that the boxes aren't properly aligned.
Does anyone has a hint on using jQuery.UI for that kind of css work?
I was studing the CSS framework documentation on jqueryui.com but there aren't that much information.
best regards,
Gordon
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您的内容框和标题框不对齐，可能是由于 css 中的填充不同，请尝试将内容框填充设置为与标题框填充相同。 当我遇到这个问题时，这解决了这个问题。
If your content box and header box don't align, it is probably due to different padding in the css, try setting your content box padding to the same as your heading box padding. This fixed the issue when I came across it.
我尝试了你的例子并且它有效。 我没有发现任何问题...您使用的是哪种浏览器？ 如果您使用 IE，那么这可能是问题所在。 尽管它应该是跨浏览器的...我不使用 IE，所以我无法检查它，抱歉。 使用任何其他浏览器尝试一下，看看是否已修复。 另请确保包含 ui-core 和 ui-theme 文件。 不要包含任何其他 CSS 文件并查看是否已修复。 我建议您使用 firebug（在 firefox 中）来查看样式是如何应用的。
检查 此页面中如何应用 CSS。 您可能会发现它很有用。
I tried your example and it works. I didn't see anything wrong... Which browser are you using? if you are using IE by any chance that could be the problem. Even though it is suppose to be cross-browser... I do not use IE so I can't check that, sorry. Try it with any other browser and see if that is fixed. Also be sure you are including the ui-core and the ui-theme files. Do not include any other CSS file and see if that is fixed. I recommend you to use firebug (in firefox) to see how the styles are applied.
Check how the CSS is applied in this page. You may find it useful.
你能提供一个它不适合你的例子吗？
也许您在加载 jQuery-UI-css 后加载自己的 css 并覆盖某些内容。
Can you provide an example where it doesn't work for you?
Maybe you load your own css after you load the jQuery-UI-css and overwrite something.