1

我创建了一个由一行五个浮动divs 组成的小部件，每个浮动 s 包含一个图像。这是 HTML 的精简版：

<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>
<div class="panel">
  <img src="/images/image.jpg" height="160" width="160">
</div>

这是 CSS 的精简版：

.panel {
display: inline-block;
float: left;
height: 160px;
position: relative;
margin: 8px 25px 0 0;
width: 160px;
}

这五个divs 在一个容器中（原始宽度为 940px -width: auto当屏幕宽度减小到 940px 以下时更改），具有左右填充（每边 20px）。

我已经使用媒体查询来创建响应式样式表，但现在我想让浮动divs 适合屏幕，因为宽度减小了。

请问有谁知道我该怎么做？

4

3 回答 3

0

如果给容器div一个 fixed width，则页面不能响应。如果将其更改为 amax-width或完全删除 width 属性，则面板应该换行。

于 2013-06-06T10:35:40.063 回答
0

我不确定您在寻找什么，但也许只是使用calc()将是处理这一切的最佳方式。

.panel {
  float: left;
  height: 160px;
  width: calc(20% - 25px);
  margin: 8px 25px 0 0;  
}

除了默认位置之外，您不需要任何其他位置static。在浮动元素时将显示设置为也没有任何意义inline-block，因为它更像是块元素。

对于容器，您可能会执行以下操作：

.container {
  width: 940px;
  max-width: 100%;
}

所以这将是一个响应式的事情。

您可以在此处查看calc()兼容性：http: //caniuse.com/calc

于 2013-06-06T10:36:59.807 回答
0 
@media (max-width: 767px) {
.leftdiv {
width:100%!important;
height:100%!important;
margin-left:auto;
margin-right:auto;
}
.right-div {
width: 100%!important;
margin-left: 0!important;
height:100%!important;
}
}
于 2013-08-14T09:12:04.667 回答