Question

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

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

这很好，但我希望在较小的屏幕上有两列：

---------------------
|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%}
}

顺便说一下，不要忘记在tag head <meta name="viewport" content="width=device-width" />结束之前放置这个

{{1}}

更新demo

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

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

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>

希望对你有所帮助。

CSS：3列布局为2列

2 个答案: