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列

回答

相關問題