CSS：将 3 列布局为 2 列答案

【问题标题】：CSS: 3-columns layout into 2-columnsCSS：将 3 列布局为 2 列
【发布时间】：2013-04-01 06:44:45
【问题描述】：

我有一个包含 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>

【问题讨论】：

if question 仅使用 CSS 是否可以这样做？是的，这可以使用 css

标签： html css layout multiple-columns

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

顺便说一句，别忘了把这个放在结尾tag你们head

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

更新demo

注意：滚动小提琴查看效果

希望对您有所帮助....

【讨论】：

您的和@BharatChodvadiya 解决方案有效，但也许我没有足够强调这一点：我希望“item-ingredients”列弹出到第二行，而您的两个答案都将“item-价格”在那里。
谢谢，这正是我想要的:)

【解决方案2】：

使用这个 html 和 css。

<article class="item">
 <div class="first" style="width:100%;">
   <div class="item-name" style="width:50%; float: left;">left</div>
   <div class="item-ingredients" style="width:50%; float: left;">right</div> 
 </div> 
 <div class="item-prices" style="width:100%;">middle</div>
</article>

希望对你有帮助。

【讨论】：