html - 三个div并排响应

我不知道自己在哪里犯错。我有3个div（实际上是ul li），我想让它们响应。 div需要从1180px到500px并排，并且在500px（小于500px）之后，div的宽度必须为100％，并且彼此之间必须靠得住，我做到了。唯一的问题是如何使它们从1180px到500px并排？这是代码

<section class="portfolio">
    <div class="wrapper">
        <ul>
            <li>
                <div class="portfolio_item">
                <img class="img-responsive" src="images/1.jpg" alt="" />
                    <div class="portfolio_title">
                        <h3>LEFT</h3>
                    </div><!-- end portfolio_title  !-->
                </div><!-- end portfolio_item  !-->
            </li><!-- end li !-->
            <li>
                <div class="portfolio_item">
                <img class="img-responsive" src="images/2.jpg" alt="" />
                    <div class="portfolio_title">
                        <h3>MIDDLE</h3>
                    </div><!-- end portfolio_title  !-->
                </div><!-- end portfolio_item  !-->
            </li><!-- end li !-->
            <li>
                <div class="portfolio_item">
                <img class="img-responsive" src="images/3.jpg" alt="" />
                    <div class="portfolio_title">
                        <h3>RIGHT</h3>
                    </div><!-- end portfolio_title  !-->
                </div><!-- end portfolio_item  !-->
            </li><!-- end li !-->
        </ul><!--  end ul  !-->
    </div><!--  end wrapper  !-->
</section><!--  end section portfolio  !-->

.wrapper {
    width: 1180px;
    margin: 0 auto;
    position: relative;
}
.portfolio {
    margin: 100px auto 38px auto;
}
.portfolio ul {
    list-style-type: none;
    overflow: hidden;
    margin-left: -62px;
}
.portfolio ul li {
    float: left;
    margin-left: 62px;
    margin-bottom: 62px;
    position: relative;
    display: block;
    overflow: hidden;
    width: 352px;
    height: 334px;
}
.portfolio ul li .portfolio_item img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1180px) {
    .wrapper {
        width: 100%;
    }
    .portfolio ul {
        margin-left: -5.2542372881355932203389830508475%;
    }
    .portfolio ul li {
        margin-left: 5.2542372881355932203389830508475%;
        margin-bottom: 5.2542372881355932203389830508475%;
        width: 29.830508474576271186440677966102%;
        height: auto;
    }
}

@media screen and (max-width: 500px) {
    .portfolio ul {
        text-align: center;
        margin: 0 auto;
    }
    .portfolio ul li {
        margin-bottom: 5.2542372881355932203389830508475%;
        width: 90%;
        height: auto;
        float: none;
    }
}

最佳答案

.wrapper是1180px的宽度。所包含的.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。

关于html - 三个div并排响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31165857/