html - CSS:将 3 列布局转换为 2 列

Question

我有一个包含 3 列的布局:

----------------------------------
|left     |middle      |right    |
----------------------------------

这很好，但我想在较小的屏幕上有 2 列:

---------------------
|left     |right    |
---------------------
|middle             |
---------------------

第二行的宽度为 100% 很重要。

是否可以仅使用 CSS 来实现？

我的 HTML 标记:

<article class="item">
    <div class="item-name">left</div>
    <div class="item-ingredients">middle</div>             
    <div class="item-prices">
        <div class="item-price">right1</div>                    
        <div class="item-price">right2</div>                    
        <div class="item-price">right3</div>
    </div>
</article>

Answer 1

使用媒体查询，这 link帮助您了解媒体查询

html

<article class="item">
    <div class="item-name">left</div>           
    <div class="item-prices">
        <div class="item-price">right1</div>                    
        <div class="item-price">right2</div>                    
        <div class="item-price">right3</div>
    </div>
    <div class="item-ingredients">middle</div>  
</article>

CSS

.item {float:left; width:100%}
.item div {
    float:left;
    width:33.3%;
    background-color:#555;
}
.item div div {width:33%}
.item div.item-ingredients {background-color:blue}
.item div.item-prices {float:right}

@media handheld, screen and (max-width: 500px){
    .item div.item-ingredients{
        width:100%;
    }
    .item div {width:50%}
}

顺便说一句，别忘了把这个放在你的 head 结束 tag 之前

<meta name="viewport" content="width=device-width" />

更新demo

注意:滚动 fiddle 看效果

希望这对你有帮助......