html - 居中 DIV,一侧有额外内容

标签 html css layout

我有一个在容器 div 中水平居中的内部 div,我需要在该容器中添加另一个 div,位于居中 div 的右侧?我怎样才能这样做而不干扰居中 div 的位置(即它应该仍然在容器中居中,而不是在容器的左边缘和另一个 div 的左边缘之间?

<div id="container">
    <div id="inner"></div>
    <div id="right"></div>
</div>

div#container {
    width: 960px;
}
div#inner {
    width: 400px;
    margin: 0 auto;
}
div#right {
    width: 100px;
    float: right;
    /* what else? */
}

理想情况下,我什至想将 div#right 的位置指定为距 div#inner 右边缘的距离,而不是使用 float:right。

(目前我想到的唯一解决办法是在左边再添加一个与div#right宽度相同的div,并设置visible:none,有没有更好的办法?)

最佳答案

我会尝试在父级内进行绝对定位 <div> :

div#container
{
  width: 960px;
  position: relative;
}

div#inner
{
  width: 400px;
  margin: 0px auto;
}

div#right
{
  position: absolute;
  width: 100px;
  right: 0px;
  top: 0px;
}

不能保证这是否会开箱即用,但我会尝试这样的事情。

关于html - 居中 DIV,一侧有额外内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4316041/

相关文章:

jquery - 如何制作一个宽度动态调整的html表格

jquery - 在刷新完成之前,调整浏览器窗口大小不会激活 jQuery 事件

javascript - 如何在 jQuery 函数处于事件状态时多次停止执行?

html - 两个div在同一行

qt - QLayout 可以隐藏而不是调整 QWidget 的大小吗?

java - 跨面板对齐 Swing 组件

html - 在正常流程中缩小我的 div 之间的差距

javascript - 如何使用javascript验证输入字段仅限制数字并将范围设置为最大值和最小值

javascript - 通过 JavaScript 使用 HTML 下拉列表值

java - 布局上的圆角