CSS：三列布局成2列

我有3列的布局：CSS：三列布局成2列

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

来源

2013-04-01 marcinkr

如果问题是否有可能只用CSS做到这一点？是的，这是可行的使用css – jhunlio

使用媒体查询，这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

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

更新demo

音符结束tag之前把这个：滚动小提琴看到效果

希望这有助于你... 。

来源

2013-04-01 07:01:17 jhunlio

你和@BharatChodvadiya解决方案的工作，但也许我没有足够强调这一点：我想“项目成分”列弹出到第二行，而你的答案是“物品价格“ 那里。 – marcinkr

我更新我的上面的代码，希望这可以帮助你 – jhunlio

谢谢，这正是我想要的:) – marcinkr

使用此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>

希望它对你有帮助。

来源

2013-04-01 07:03:39

CSS：三列布局成2列

回答

相关问题