3列到2列。多行

所以我遇到的問題是我有3列的多行。然而;如果我想要更小的內容寬度，我希望它降到2列。怎麼樣？我也不得不提到，每列都包含圖像背景。我見過的每個解決方案都是讓第三列項目100％寬，但是我不能用圖像來完成。這是甚至可能與CSS &僅HTML。3列到2列。多行

任何想法？

在此先感謝。

編輯

<div class="media-row clearfix first"> 
     <div class="g6 first"> 
      Column 1 
     </div> 
     <div class="g6"> 
      Column 2 
     </div> 
     <div class="g6 last"> 
      Column 3 
     </div> 
    </div> 

<div class="media-row clearfix last"> 
    <div class="g6 first"> 
     Column 1 
    </div> 
    <div class="g6"> 
     Column 2 
    </div> 
    <div class="g6 last"> 
     Column 3 
    </div> 
</div> 

.media-row { margin-bottom: 20px; } 
div.g6 { float: left; margin-left: 1.76%; min-height: 20px; overflow: hidden; } 
div.g6:first-child { margin-left: 0 } 
div.g6 { width: 27.91%; }

來源

2013-11-03 Martastico

這應該自動發生..檢查此[小提琴]（http://jsfiddle.net/Emjdx/）。 –

用我使用的代碼編輯。 – Martastico

不要像上面的代碼中那樣使用那種用法.. –

該解決方案是使用@media querys

入住這fiddle

你應該找到突破點，爲你的HTML 做出這樣的規則

@media only screen and (max-width: 769px) { 
    div.g6{ 
     width: 49%; 
     margin-left: 1%; 
    }  
}

來源

2013-11-27 15:49:30 ppollono

3列到2列。多行

回答

相關問題