个人中心
gpt4 book ai didi

html - CSS如何在保持居中的同时 Conceal 调整大小的div

转载 作者：太空宇宙 更新时间：2023-11-04 03:23:17 26 4
gpt4 key购买 nike

我正在开发 Facebook 应用程序(我不是 CSS 专家。)。 iframe Canvas 是液体的，例如。宽度 100%。

应用程序的主要 div 宽度为 500 像素。主 dic 有左右两个 div(见下图)。左右 div 的宽度必须相同。

当用户调整浏览器窗口大小时，我希望主 div 以固定宽度居中，而左右 div 必须适当调整大小以仅占用可用空间。

如果左右 div 没有空间，它们必须消失。主 div 必须居中。

enter image description here

非常感谢您的帮助。

</style>
body{
  margin: 0px;
  padding: 0px;
}
#main{
  width: 300px;
  display: inline-block;
  background: red;
}
#left, #right{
  width: calc(50% - 150px);
  display: inline-block;
  background: green;
}
@media (max-width: 400px) { 
  #left, #right{
    display: none;
  }
}
</style>
<body>
<div style="text-align: center;">
<div id="left">1</div><div id="main">2</div><div id="right">3</div>
</div>
</body>

这是我目前所拥有的:http://jsfiddle.net/clicker314/L77jh8ak/4/

最佳答案

如果你愿意使用 calc() CSS 函数，这个问题相对容易解决:

#main{
  width: 500px;
  display: inline-block;
}
#left, #right{
  width: calc(50% - 250px);
  display: inline-block;
}

因此，左右 div 根据屏幕宽度的一半减去主元素的一半来调整它们的高度。如果您想要回退，请在 calc() 宽度规则之前的行中添加另一个“宽度:”规则。

这适用于所有现代浏览器，包括 IE 10+。如果你想要 IE 8/9 支持，添加我上面提到的第二个宽度规则。

对于 IE 8/9 支持，您有两个选择:1. 为这两个选项指定宽度。 IE。 #left, #right{width: 200px;}。2. 添加一些JS/jQuery来模仿CSS的calc()函数。

要 Conceal 特定尺寸的 div，请添加媒体查询(我添加的 600px 是假设的，选择您喜欢的任何最小屏幕尺寸):

@media (max-width: 600px) { 
  #left, #right{
    display: none;
  }
  #main{
    width: 100%;
  }
}

#main 规则是可选的。它假定您希望 #main div 占用容器中的所有可用空间。

关于html - CSS如何在保持居中的同时 Conceal 调整大小的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27552282/

26 4 0
文章推荐： Python file.tell() 给出错误的值
文章推荐： node.js - 尝试对 sails js 项目进行 dockerize
文章推荐： python - 比 if __name__ == '__main__' 在 Python 脚本中两次更好的解决方案
文章推荐： javascript - 这个逻辑有什么问题吗？ Node JS
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com