javascript - 给定三个水平对齐的 div,如何在浏览器窗口调整大小时使中心 div 清除其他两个?

标签 javascript jquery html css web

要了解更多细节,请考虑以下内容:

  • 我有一排三个 div R(右)、C(中)和 L(左)。
  • 它们被封装在父 div Container
  • Container 具有 css 样式 display:inline-block
  • 我有 L 向左浮动
  • 我有 R 向右浮动。
  • 我通过设置 margin: auto 使 C 居中。

我的问题:

我希望中间的 div 居中,直到 RL 与它发生碰撞.如果发生这种情况(窗口调整大小)。我希望 C 清除两者,并在 R 下方居中。

达到这样的结果的最佳方法是什么?我知道我的设置可能有误,如果是这种情况请告知!

提前致谢!

最佳答案

就像@atdrago 提到的,媒体查询真的是去这里的方式。

如果您的宽度是固定的,您也可以尝试将中心 div 向左浮动并在 .container 元素上放置一个(固定的)max-width

http://jsfiddle.net/mrhps/2/是一个工作示例。

关于javascript - 给定三个水平对齐的 div,如何在浏览器窗口调整大小时使中心 div 清除其他两个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21441351/

相关文章:

javascript - 如何使用 jquery 或 css 使 div 悬停并停留在页面底部?

javascript - 如何将博客中的标签<br/>更改为<p>?

javascript - 使用嵌入式 ruby 循环谷歌地图标记?

javascript - Google map 不支持 Angular Routing

javascript - 父级 div 在将子级拖动到其中时不会滚动

javascript - 我想使用 HTML 和 JavaScript 进行 While 循环,但是使用我当前的代码,循环不会结束

javascript - jQuery.html() 结果,浏览器不解释为 HTML

javascript - 如何使用增量 ID 和值多次克隆列表 "li"的元素

javascript - jQuery DataTables - 行点击不在第一页以外的页面上注册

javascript - 在 fetch() POST 请求已提交后使用 fetch() GET 请求以输出数据库数据而无需硬页面刷新