使用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更改表格布局

回答

相关问题