Question

我目前正在开发一个必须完全响应并可在不同设备（桌面，移动设备等等）上访问的网站。我想只有一个html标记，我正在使用媒体查询来实现不同类型的布局。

对我来说，拥有干净的标记非常重要，让我们开始吧。为了方便起见，我删除了所有不必要的东西。我有一个文章列表（-tags）。每篇文章的内容都是VARIABLE，所以我无法确定固定的高度。我的目标是根据设备安排这些部分。例如：

1）在移动设备上只有1列，所有部分都在彼此之下。

2）在平板电脑上我想要有2列，所以2篇文章彼此相邻（见下图）。

3）在桌面上我想要3列......

我的标记看起来像这样，并且知道像colums等任何表现性的东西。如果我在标记中添加了列（额外的标记，例如使用column-div），我将没有任何机会根据目标更改布局设备。这意味着我会在“标记时间”修复布局/演示文稿。

<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>
<article>
    <h1>Header<h1>
    <p>Some text...</p>
</article>

我不是初学者都在使用CSS：过去几天我几乎尝试了所有内容。

那么如何以典型的2列布局排列文章？如果每篇文章的高度相同，我会很容易的。 1列也没问题。 3列比2列更难实现。

2列的所需布局如下：

desired layout with 2 columns http://oi44.tinypic.com/2djyrli.jpg

但是当我使用浮动（浮动：左）

时，我确实得到了这个结果

float with left http://oi43.tinypic.com/2rw6qtk.png

由于旧版浏览器缺乏支持（我必须支持），因此ms-grid和flexbox无法替代。

提前致谢！

Answer 1

我不完全确定你的问题以及它与典型的带有CSS3的RWD有什么不同，但听起来有什么不同。您可以使用媒体查询来响应不同屏幕分辨率之间的布局。包括各种手机和平板电脑;肖像和风景。

以下是一个例子。

@media screen and (max-width: 480px) {
   #leftbox { 
     margin-right: 100px;
    }
}

查看此链接以供参考; http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

或者，您可以为每个分辨率加载一个全新布局的新样式表。

Answer 2

只是为了澄清我的问题：

我知道如何使用媒体查询。问题仅限于如何安排文章，如插图所示。

CSS中的列排列依赖于目标设备

2 个答案: