我正在开发 Facebook 应用程序(我不是 CSS 专家。)。 iframe Canvas 是液体的，例如。宽度 100%。
应用程序的主要 div 宽度为 500 像素。主 dic 有左右两个 div(见下图)。左右 div 的宽度必须相同。
当用户调整浏览器窗口大小时，我希望主 div 以固定宽度居中，而左右 div 必须适当调整大小以仅占用可用空间。
如果左右 div 没有空间，它们必须消失。主 div 必须居中。
非常感谢您的帮助。
</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>
最佳答案
如果你愿意使用 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/