使用CSS更改表格佈局

我有一個簡單的頁面，我需要在移動設備和桌面上看起來不同。對於臺式機，我需要幾個段落左側的標誌。對於手機，我需要刪除頁面的標題，並將徽標放在文本上方。到目前爲止，我還沒有很好的運氣。我應該怎麼做才能使它與CSS一起工作？目前，我只是將文字和圖像放在一張桌子上，並在一列中放置了標識，而在另一列放了文字。使用CSS更改表格佈局

來源

2016-08-02 user348136

您能否包含相關的HTML或CSS，或至少是其代表性的示例？在我的頭頂，媒體查詢可能會在這裏運行良好。 –

一個解決方案是使用具有'列'div而不是表格的媒體查詢。

的CSS代碼可能如下：

@media only screen and (min-width: 1200px) { 
    .two-col { 
    -webkit-column-count: 2; 
     -moz-column-count: 2; 
      column-count: 2; 
     -webkit-column-gap: 1.5rem; 
     -moz-column-gap: 1.5rem; 
       column-gap: 1.5rem 
    } 
}

，然後HTML代碼將是這樣的：

<div class="two-col"> 
/* textual content here... */ 
</div>

您將需要調整這個以適應您的情況，但基本上用媒體查詢檢查移動設備或桌面。如果是桌面，則會創建兩列寬度相等的列。在你的情況下，圖像將首先進入，然後文本將環繞到右側列。如果它是移動設備，則不會創建列，並且會在文本頂部顯示圖像。

來源

2016-08-02 02:05:49

可以通過媒體查詢給出css屬性的不同值。你可以在這個問題上看到解釋here。

公共查詢用於小型設備是：

@media screen and (max-width: 1024px) { 
    ... 
}

它查詢1034px下的所有屏幕並且定義了一個新的屬性集。

來源

2016-09-26 22:47:27

使用CSS更改表格佈局

回答

相關問題