Question

我正在开发Facebook应用程序（我不是CSS专业版）。 iframe画布是液体，例如。宽度100％。

持有该应用程序的主要部分是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/

Answer 1

如果你愿意使用calc（）CSS函数，这个问题相对容易解决：

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

因此，左右div基于屏幕的一半宽度调整其高度，减去主要元素的一半。如果您想要后备广告，请添加另一个＆＃39;宽度：＆＃39;在calc（）宽度规则之前的行上的规则。

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

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

要隐藏特定大小的div，请添加媒体查询（我添加的600px是假设的，选择您喜欢的任何最小屏幕尺寸）：

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

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

CSS如何隐藏resize div同时保持居中

1 个答案: