Question

我创建了一个由五行浮动div组成的小部件，每行包含一个图像。这是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;
}

五个div位于一个容器中（原始宽度为940px - 当屏幕宽度减小到940px以下时更改为width: auto），左右填充（每边20px）。 / p>

我使用媒体查询来创建自适应样式表，但我现在想要在宽度减小时使浮动div适合屏幕。

有人知道我怎么能这样做吗？

Answer 1

如果容器div被赋予固定width，则该页面无法响应。如果将其更改为max-width或完全删除width属性，则面板应该换行。

Answer 2

我不确定你在寻找什么，但也许只使用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

Answer 3

@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;
}
}

如何使用百分比宽度进行一行5 <divs>响应？</divs>

3 个答案: