html - 如何管理两个具有绝对位置的div

标签 html css

我正在尝试解决 div 宽度问题所在的任务。问题是我需要将两个 div 的位置设置为绝对位置(参见图片 - div1 和 div2)。

image of divs

Div1 有属性

min-width:280px

而另一个 div 应该具有其余页面的宽度。

问题是如果第一个 div 的宽度超过 280px,如何处理这个最小宽度参数。

有没有什么解决办法,如何在不使用 JS 的情况下动态设置 div2? 两个 div 的位置不能更改,必须保持绝对设置。

最佳答案

我仍然不确定 div 必须绝对定位的原因,但我可以承认您可以将它们设置在绝对容器中并作为表格单元格定位:

<div class="container">
    <div class="left">Some dynamic content here</div>
    <div class="right"></div>
</div>

CSS:

.container {
    position: absolute;
    display: table-row;
    /*Set your top-right-bottom-left absolute position here*/
}

.container > div {
    display: table-cell;
}

.left {
    min-width: 280px;
}

.right {
    width: 100%;
}

检查 fiddle :http://jsfiddle.net/3QGfj/

否则恐怕你应该使用 Javascript。

关于html - 如何管理两个具有绝对位置的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18966725/

相关文章:

javascript - 选项卡滑动效果 : Translate pen into vanilla JavaScript

jquery - 使用链接在页面加载时展开某些 Div

javascript - jQuery - 显示/隐藏按钮失败

html - CSS 将页脚保持在底部

html - 链接到命名 anchor 在 IE 中不起作用 - 已经在 SO 上尝试过建议的解决方案

html - 需要帮助分配正确的媒体查询

javascript - $(window).on ('scroll',函数()当滚动到50%时,我想加载一些数据

php - 如何在页面加载后触发 Javascript 函数?

javascript - 如何使用 HTML/javascript 以预定义的顺序加载图像?

html - 如何通过按钮或 anchor 更改标题