如何使用百分比宽度使一行 5 个 <divs> 响应？答案

【问题标题】：How do I make a row of 5 <divs> responsive using percentage widths?如何使用百分比宽度使一行 5 个 <divs> 响应？
【发布时间】：2013-06-02 07:38:45
【问题描述】：

我创建了一个小部件，它由一行五个浮动divs 组成，每个都包含一个图像。这是 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 位于一个容器中（原始宽度为 940 像素 - 当屏幕宽度减小到 940 像素以下时更改为 width: auto），具有左右填充（每边 20 像素）。

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

请问有人知道我该怎么做吗？

【问题讨论】：

检查您的代码。 img 标签未正确关闭。还请提供您希望的截图。
我在 HTML5 中编码，由于 imgs 是 void 元素，它们不需要关闭：w3.org/html/wg/drafts/html/master/syntax.html#void-elements
从你的代码中检查这个 sn-p。 "/images/image.jpg height="160"src下的大括号不完整你觉得这样对吗？ - @DomStapleton。仅供参考，我不是在谈论结束标签。可能是话造成了误会。
请原谅，内森；我已经修复了代码。谢谢你让我知道。只是为了让您放心，我的网站上的 src 属性已正确关闭！我只是在剥离代码时忘记添加右引号。

标签： css html width padding

【解决方案1】：

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

【讨论】：

谢谢，pzin。我会试一试，让你知道会发生什么。

【解决方案2】：

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

【讨论】：

对不起，我应该更清楚一点：父级div在屏幕宽度大于该宽度时为940px，但当屏幕宽度低于940px时更改为width: auto。跨度>
啊。那可能会使我的答案毫无用处！

【解决方案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;
}
}

【讨论】：