html - 三个 div 并排响应

Question

我不知道我哪里出错了。我有三个 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;
    }
}

Answer 1

.wrapper 宽度为 1180px。包含的 .portfolio ul li 的宽度为 352px。但它们也带有 62px 的 margin-left。

因为它们是三个元素，(352 + 62) x 3 = 1242px 因此它们不适合 1180 包装器。

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

编辑:之前的修复在 1180 像素以上有效。要在 500px 和 1180px 之间获得响应式解决方案，在 @media 屏幕和 (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 .