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

使用媒体查询，此链接可帮助您了解媒体查询

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" />

更新演示

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

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

Answer 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>

希望对您有所帮助。