如何使用CSS變換三個欄佈局分爲兩個欄佈局和兩成一個

Question

https://docs.google.com/document/d/1694Z1xMTKAkHwKheGzrViSRnr_EXno7XBl_Cf38Xrc0/pub

我使用的媒體規則具體devices.Can有人解釋我的邏輯上面的疑難問題。已經創建了三個表，每個單獨一列，並填充單元格的圖像和title.how我可以將這三列轉換爲兩個列，屏幕大小爲1024x720。

Answer 1

3×2箱1024寬度，2×3盒，1X6盒小屏幕

http://output.jsbin.com/jecinulepu/14

HTML

<div id ="container"> 
<div class="box"> 
<span>title</span> 
</div><div class="box"> 
<span>title</span> 
</div><div class="box"> 
<span>title</span> 
</div><div class="box"> 
<span>title</span> 
</div><div class="box"> 
<span>title</span> 
</div><div class="box"> 
<span>title</span> 
</div> 
</div> 

CSS

#container { 
    max-width:1024px; 
    height:100%; 
} 

.box{ 
    width:300px; 
    height:250px; 
    background:grey; 
    float:left; 
    margin:10px; 
    display:block; 
    border:1px solid #999; 
} 

.box span { 
    width:300px; 
    height:50px; 
    background:white; 
    display:block; 
    text-align:center; 
    font-size:40px; 
    margin-top:200px 
} 

/* Portrait */ 
@media 
    (max-device-width: 800px) 
    and (orientation: portrait) { 

    #container { 
    max-width:800px; 
    } 
    } 



/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 

    #container { 
    max-width:480px; 
    } 

} 

Answer 2

請再試該方法中，

容器{

最大寬度：1,024;
身高：100％;
}

.box {
width：300px;
height：250px;
背景：灰色;
float：left;
margin：10px;
display：block;
border：1px solid＃999;
}

.box span {
width：300px;
height：50px;
背景：白色;
display：block;
text-align：center;
font-size：40px;
邊距：200像素
}

/*縱向*/
@media
（MAX-設備寬度：800像素）
和（方向：縱向）{

#container的{
max-width：800px;
}

.box的{
寬度：100％！重要; }

}

/*縱向*/
@media只有屏幕
和（最小 - 設備寬度：320像素）
和（MAX-設備寬度：480像素）
和（ -webkit敏設備像素比：2）
和（方向：縱向）{

#container的{
最大寬度：480像素;
}

.box {
width：100％！important;
}}