CSS中的列排列取决于目标设备答案

【问题标题】：Columns arrangement in CSS dependent on target-deviceCSS中的列排列取决于目标设备
【发布时间】：2013-11-22 23:32:45
【问题描述】：

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

对我来说，有一个干净的标记很重要，所以让我们开始吧。为了让事情变得更容易，我删除了所有不必要的东西。我有一个文章列表（-tags）。每篇文章的内容都是可变的，所以我无法确定一个固定的高度。我的目标是根据设备安排这些部分。比如：

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

2) 在平板电脑上，我希望有 2 列，因此 2 篇文章彼此相邻（见下图）。

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

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

<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 列更难实现。

两列所需的布局如下：

但我在使用浮点数时确实得到了这个结果（浮点数：左）

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

提前致谢！

【问题讨论】：

您的问题是什么？如何根据所使用的浏览器改变输出？或者只是如何制作 2 列或 3 列输出？我不知道ms-grid 或flexbox 是什么，但是Yahoo UI 怎么样？它对我来说总是很有效。
没有 flexbox，CSS 无法处理这些细微差别。这就是 jQuery Masonry 这样的项目存在的原因。
使用 CSS 一点也不好玩。浏览器开发行业多年来所做的一切令人遗憾。我们现在是 2013 年，没有任何技术可以涵盖所有当前使用的浏览器的基本布局和工作。我想知道破解所有非标准浏览器的东西会有多少经济损失。

标签： html css two-columns

【解决方案1】：

我不完全确定您的要求是什么，以及它与典型的带有 CSS3 的 RWD 有何不同，但与听起来有何不同。您可以使用媒体查询来响应不同屏幕分辨率之间的布局。包括各种手机和平板电脑；纵向和横向视图。

以下是一个例子。

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

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

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

【讨论】：

【解决方案2】：

只是为了澄清我的问题：

我确实知道如何处理媒体查询。问题仅限于如何安排如图所示的文章。

【讨论】：