HTML(5)/CSS 中的列布局

2024-03-12

HTML5/CSS 中是否有一种方法可以将列布局如下所示,并且仍然可以正确地显示文本?

######  ######
# C1 #  # C2 #
#    #  #    #
######  ######

######  ######
# C3 #  # C4 #
#    #  #    #
######  ######

######  ######
# C5 #  # C6 #
#    #  #    #
######  ######

只是为了澄清 - 我希望能够在单个元素中编写所有文本并让 CSS 创建列。


虽然这使用单个元素,但必须手动定义中断。

Use the 列跨度 http://www.w3.org/TR/css3-multicol/#column-span属性并使用诸如<br />定义垂直断点。内容的外观和渲染大致如下:

<p>
  CSS3 multi
  <br/>
  columns are
  <br />
  just awesome.
</p>

CSS3    | multi
-----------------
columns | are
-----------------
just    | awesome

CSS 看起来像:

p {
    column-count: 2;
    column-rule: 1em solid black;
}

br {
    column-span: all;
}

相应地添加浏览器特定的前缀(-webkit、-moz)。column-span截至目前,任何浏览器可能都不支持。看到这个article http://www.quirksmode.org/css/multicolumn.html了解详情。这是我的软弱attempt http://jsfiddle.net/vwLeq/这在 Chrome 上不起作用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML(5)/CSS 中的列布局 的相关文章

随机推荐

  • 自动 Java 错误报告系统

    有谁知道java中的自动错误报告系统吗 我们有一个安装在客户端服务器上的服务器产品 我们的想法是 我们的服务器会打电话回家 将错误的详细信息发送到我们的一台服务器 然后将错误输入到我们的错误跟踪器中 最好是通过 http 进行 并非所有异常
  • IllegalArgumentException:指定为非 null 的参数为 null:方法 kotlinx.coroutines.BuildersKt__Builders_commonKt.launch,参数上下文

    我正在尝试对以下使用 kotlin 协程的函数进行单元测试 fun authenticateWithUserAndPassword usernameOrEmail String password String launchUI strate
  • Android 数据绑定 XML 错误

    我在 Android Studio 项目上使用数据绑定库 每当我构建 运行 清理 重建等时 我都会收到以下错误 app processDebugResources AGPBI kind error text Error parsing XM
  • jqGrid不显示JSON数据

    我希望将 jqGrid 用于我当前正在开发的 Web 项目 问题是 我似乎无法让网格显示 JSON 数据 这是网格的初始化代码 fn loadjqgrid function httpposturl this jqGrid url httpp
  • 在 Visual Studio 中制作属性代码片段

    我厌倦了编写样板属性代码 例如 public string Name get return this name set SetProperty ref name value 因此 我决定在 Visual Studio 中制作一个代码片段来自
  • htaccess .html、.css、.js 的 UTF-8 编码 - 最好的方法是什么?

    对于 yslow 页面速度 我想删除我的元标记并将我的编码放入 htaccess 文件中 以下是我读过的所有方法 哪种方式是首选方式 另外 语言设置也是一个好主意 如果文件匹配之外 它将适用于所有文件类型吗 1 https github c
  • PyCharm 中的 PyQt4 没有自动完成功能

    在我使用的办公室电脑上 Python 3 4 PyQt4 版本 4 11 1 PyCharm 社区版 3 4 1 我按照上述顺序安装了所有内容 但是 代码完成不起作用 它适用于导入 但不适用于类和方法 我做了一个小示例程序 import s
  • 如何找到最大堆栈大小?

    我正在使用 Ubuntu 11 04 如何找出进程的最大调用堆栈大小以及堆栈的每个帧的大小 快速谷歌搜索应该会显示关于这个主题的一些信息 http www cs nyu edu exact core doc stackOverflow tx
  • 如果已在下拉列表中选择了项目,则 SelectedIndexChanged 事件不会触发?

    假设我有一个包含 2 个项目的下拉列表 并且默认情况下选择第一个项目 如果我选择单击下拉列表中的第一项 有没有办法让 SelectedIndexChanged 事件仍然触发 我以为我可以通过将下拉列表的 SelectedIndex 设置为
  • ImportError:找不到入口点('console_scripts','easy_install')

    我正在尝试安装一个软件包 其中一个说明如下 但出现错误 easy install U distribute pip Traceback most recent call last File Library Frameworks Python
  • 如何知道在jetpack compose的lazyrow视口中完全可见的项目?

    我有一个包含项目的惰性行 现在 我想对每当用户滚动惰性行时在视口中完全可见的项目进行 API 调用 我尝试过以下代码 listState rememberLazyListState LaunchedEffect listState snap
  • 计算机如何记录时间? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 时间在计算机中是如何表示的 我的意思是计算机不是尽可能快地完成所有计算吗 如果事物在不同的机器上以不同的速度运行 你如何跟踪时间的流逝
  • React Native - 无法在前端导入猫鼬(但它可以从后端运行)

    我无法在前端导入猫鼬 但它在后端有效 我有一个单独的后端目录 我有一些代码可以将几个用户添加到我的数据库中 这里是 import mongoose from mongoose import User from models user con
  • 信号量和互斥量在实现上有什么区别?

    我读到互斥锁和二进制信号量仅在一方面不同 在互斥锁的情况下 锁定线程必须解锁 但在信号量中 锁定和解锁线程可以不同吗 哪一种效率更高 假设您知道信号量和互斥体之间的基本区别 为了快速 简单的同步 请使用临界区 要跨进程边界同步线程 请使用互
  • PyQt:悬停按钮时更改光标

    我正在尝试制作一个按钮 或任何其他 Qwidget 这将在悬停时更改用户光标 例如 当我将鼠标悬停在 QPushButton 上时 它会将光标从箭头更改为指向手 我正在使用 Qt 样式表 所以我不完全确定 但是有没有办法在那里做类似的事情
  • WebSockets-将图像发送到连接的客户端

    这是我在 stackoverflow com 上发表的第一篇文章 所以我会尽量简单明了 我必须使用 websockets 开发 web 应用程序的功能 我能够发送文本数据 使用websockets 但不是图像 我已经查看并尝试了不同的可能性
  • 有没有办法创建由 `std::function<>` 包装的函数的哈希值?

    我有一个 C 函数 需要一个std function作为输入参数 具体来说 一个std function
  • IE 悬停选择问题

    我和一个朋友正在尝试解决 IE 7 8 我们在这里构建了一个规范的示例 http www mathgladiator com share ie select bug hover css menus htm http www mathglad
  • 如何从音频文件中分离男声和女声(C++或Java)

    我想区分音频文件中的男声和女声并将它们分开 作为输出 我希望将两个声音分开 你能帮我一下吗 编码可以用java还是c 完成 这可能是一个非常复杂的问题 它类似于编写自己的语音识别 或识别 算法 您首先可以将音频转换为频域 这是使用快速傅立叶
  • HTML(5)/CSS 中的列布局

    HTML5 CSS 中是否有一种方法可以将列布局如下所示 并且仍然可以正确地显示文本 C1 C2 C3 C4 C5 C6 只是为了澄清 我希望能够在单个元素中编写所有文本并让 CSS 创建列 虽然这使用单个元素 但必须手动定义中断 Use