Question

我无法弄清楚我犯错误的地方。我有三个div（实际上是ul li），我想让它们响应。 Div需要从1180px到500px并排，在500px（小于500px）之后，div需要100％宽度，一个低于另一个，我做到了。唯一的问题是如何将它们从1180px并排放到500px？这是代码

<a href='/uploads/1/2/2/3/12234663/4105150_orig.png' id='#interstitial' rel='lightbox' onclick='if (!lightboxLoaded) return false'>test</a>

Answer 1

.wrapper宽度为1180像素。包含.portfolio ul li的宽度为352px。但他们也有62px的保证金。

由于它们是三个元素，（352 + 62）x 3 = 1242px，因此它们不适合1180包装。

要么减小宽度或边距（或使它们基于百分比。）In this example，我将.portfolio ul li宽度更改为每个331px，现在3个元素并排放置。

编辑：上一个修复工作超过1180px。要获得500px和1180px之间的响应式解决方案，在@media screen and (max-width: 1180px) {部分的宽度上进行此调整可以解决这个问题：

.portfolio ul {
    /* Using full space in the container */
  margin-left: 0;
  padding-left:0;
}
.portfolio ul li {
    /* Making sure the 3 elements width and margin add up to 100%
   (2.5 + 2.5 + 28) x 3 =~ 100%   */
    margin-left: 2.5%;
    margin-right: 2.5%;
    width: 28%;
    height: auto;      
}

这是有效的in this codepen。

三个div并排响应

1 个答案: