是否可以在水平面上制作 CSS3 列?

2024-05-01

我想知道是否可以水平生成 CSS3 列。

例如。如果我有段落 a、b、c 和 d,并且我给它们“列数:2”,则输出将是

a c

b d

我想创建该列,以便输出变为

a b

c d

有谁知道使用 css3 列时这是否可能?

我希望我的页面是可扩展的,这就是为什么我宁愿使用列,以便列计数会自动生成与屏幕尺寸相比正确数量的列。

原始页面主要使用3-4列


如果您指定段落的最小/最大宽度,则为段落指定宽度并向左浮动应该可行。它应该与可变宽度包装元素一起使用,但如果您不允许段落在受限宽度下缩放太多,则可能会中断。

p {
    float: left;
    max-width: 160px;
    min-width: 100px;
    margin: 20px;
}

div { //wrapper
    width: 480px;
}

jsFiddle http://jsfiddle.net/kj8JU/

不要忘记清除列后面元素中的浮动。

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

是否可以在水平面上制作 CSS3 列? 的相关文章

  • 引用 url() 的值真的有必要吗?

    我应该在样式表中使用以下哪一项 Example 1 background image url image png Example 2 background image url image png Example 3 background i
  • 底部带有三角形的 div 和背景图像

    我想做一个div 有一个底部的三角形 但我需要三角形上的背景图像为了出现 我尝试使用伪元素 after 但它不起作用 homebg after content position absolute top 100 left 0 right 0
  • 哪种 Javascript 解决方案(不是 .htc)可以真正在 IE7 和 8 中实现抗锯齿圆角?

    哪种 JavaScript 解决方案 不是 htc 确实可以在 IE7 和 8 中实现抗锯齿圆角CSS3在支持的浏览器中给出 我尝试了很多 http www ruzee com blog ruzeeborders http www ruze
  • CSS 未在 Django 项目中加载?

    我是 Django 新手 但负责该项目的前端工作 我一直在研究如何准确加载 css 文件 但我发现这些方法不起作用 这是 html 文件布局 load static
  • a:悬停颜色不起作用

    一件很奇怪的事情 我想在悬停时更改链接的文本颜色和背景颜色 这是代码 css link menu a color white display block height 100 width 100 text decoration none t
  • JavaFX使节点覆盖父节点边框颜色

    我有一个如下所示的节点 仅使用 css 我希望标签覆盖其父边框颜色 因此标签下方的边框颜色部分变得不可见 我用来制作这个边框的CSS代码 fx border color black fx border width 3 fx border r
  • 不要包裹 span 元素

    我有一份清单 span 可以在 a 内左右移动的元素 div 元素 如果某些跨度超出了 div 它们应该被隐藏 这可以很好地使用overflow hidden 但是 如果跨度超出了 div 的容纳范围 跨度就会换行 这对于我的用例来说是不期
  • 如何使用 jQuery 单击特定链接时打开引导导航选项卡的特定选项卡?

    我是 jquery 和 bootstrap 的新手 所以请考虑我的错误 我已经创建了一个用于登录和注册的 bootstrap 模式 它包含两个导航选项卡 称为登录和注册 我有两个按钮可以弹出相同的模态窗口 但在模态窗口内显示不同的选项卡 每
  • 如何对多行文本中的每一行应用填充?

    我已将背景颜色应用于 span 标签 也有左和右padding设置在它上面 问题是 padding仅适用于左侧 开始 和右侧 结束 span 而不是当文本换行时每行的左侧 开始 和右侧 结束 我该如何应用左和右padding to the
  • HTML 表格 - 固定列宽和多个可变列宽

    我必须建立一个有 5 列的表 表格宽度是可变的 内容宽度的 50 有些列包含固定大小的按钮 因此这些列应该有一个固定大小 例如 100px 有些列中有文本 所以我希望这些列具有可变的列宽 例如 Column1 tablewidth sum
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • 简单的html css块结构,不能对内容div使用-headerHeight底部边距来避免滚动条吗?

    以下是我的简单 html css 结构
  • Flexbox 的行之间可以有一条线吗?

    我有一个水平导航 它有点长 需要重新排列以适应狭窄的显示 我使用 flexbox 使其重排成多行 但行数较多时 导航项之间的划分就不那么明显了 我尝试在顶部给它们一个边框 它有点有效 但当然 边框仅在各个导航选项上可见 而不是在所有 Fle
  • 有没有办法改变输入类型=“日期”格式?

    默认情况下 输入type date 显示日期为YYYY MM DD 问题是 是否可以将其格式强制为 DD MM YYYY 无法更改格式 我们必须区分有线格式和浏览器的表示格式 接线格式 The HTML5日期输入规范 https www w
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题

随机推荐

  • Socket IO聊天例子很慢

    我是 Node js 和 Socket IO 的新手 我想尝试一下解释的示例 https socket io get started chat https socket io get started chat 我做了我必须做的一切 它起作用
  • 不同 Perl 安装造成的混乱

    我尝试升级 Perl 却把我的电脑搞得一团糟 我目前运行的是 RHEL6 5 64 位 事情是这样的 我安装了 perl 5 10 1 并且运行良好 这是安装好的 我可以从百胜看到它 我想安装 Padre 一个 Perl IDE 但这至少需
  • 删除查询字符串参数

    Is there any way to remove query string parameters from url in azure api management Thanks in advance 是的 您可以通过在发布者门户的操作屏
  • 角度锚标记单击的元素 ID 未显示

    我正在尝试获取单击的锚元素的 id 这是我的 HTML div class list group col md 4 a href class list group item img src book image alt p strong P
  • 如何在android文本视图的任意一端插入文本?

    是否可以有一个文本视图 其中在文本视图的最左侧包含一些文本 在文本视图的最右侧包含一些文本 例如 我想要一个应该像这样显示的文本视图 文字 a 可以使用单个 TextView 只需将文本放入 HTML 格式即可 例如
  • Firebase 动态链接无法获取参数

    我正在我的应用程序中处理邀请 我希望用户推荐其他人 推荐人将在他们推荐的人注册后获得奖励 我正在关注这个firebase 邀请教程 https firebase google com docs dynamic links use cases
  • 有没有办法运行查询并检查聚合数据而无需再次重新运行查询?

    在决定枚举 LINQ 查询的结果集之前 我想查看查询结果计数 可能还有其他聚合数据 几乎每个 LINQ 示例都会立即枚举 foreach 循环中的结果 但我想检查计数以确定是否需要循环每个结果 有没有办法运行查询并检查聚合数据而无需再次重新
  • jQuery 绑定 ajax:成功无法在 Rails 3 应用程序中为新创建的(ajax)项目工作

    编辑这篇文章是因为我发现问题实际上在于rails无法绑定到ajax success函数 使用导轨3 2 3 感谢您花时间阅读并尝试提供帮助 我在 ajax success 删除项目上添加一个简单的淡出功能 如下所示 document rea
  • 在所有设备上使用 jquery 垂直对齐?

    我发现在不更改其他元素布局的情况下垂直对齐页面上的某些元素是有问题的 这个问题在移动设备上更加严重 如此多的屏幕尺寸 分辨率 纵向 横向 var x window innerHeight myDiv height myDiv css mar
  • Android ArrayList 的 IndexOutOfBoundsException [重复]

    这个问题在这里已经有答案了 我遇到了一个非常烦人的问题 一些代码抛出 IndexOutOfBoundsException 我真的不明白为什么 logcat 指向以下代码的 addTimetableItem 我们将对此进行更多解释 if so
  • 测试涉及打开文件夹/工作区的 VSCode 扩展

    我正在开发一个 VSCode 扩展 它将当前在工作区中打开的文件的路径考虑在内 因此 为了进行可重现的测试 我尝试在 VSCode 中打开测试文件夹本身 然后打开其中的测试文件 如下所示 import as vscode from vsco
  • 学说和大量数据

    我有一个返回约 50k 行的查询 似乎学说将整个结果放入内存中超出了内存限制 128M 我发现节省一些内存的唯一解决方案是 result gt execute array Doctrine Core HYDRATE NONE 但还是超出了极
  • 在运行时拖动窗体上的控件

    我刚刚开始使用 WPF 但我正在尝试添加我的代码 来自 Winforms 使用户能够在运行时将任何控件拖动到他们想要的任何位置 但我似乎无法获取鼠标当前的位置 呃 没有鼠标位置 在 Mouse 事件中 您可以使用 e GetPosition
  • 如何让 CompletionService 知道项目中的其他文档?

    我正在构建一个允许用户定义 编辑和执行 C 脚本的应用程序 定义由方法名称 参数名称数组和方法的内部代码组成 例如 名称 脚本1 参数名称 arg1 arg2 代码 return Arg1 arg1 Arg2 arg2 基于这个定义 可以生
  • 安装 mariadb 包时找不到 mariadb_config [重复]

    这个问题在这里已经有答案了 我尝试在 ubuntu 20 04 上安装 mariadb 软件包 并收到以下消息 Collecting mariadb Using cached mariadb 1 1 3 tar gz 80 kB Prepa
  • StorageFile比IsolatedStorageFile慢50倍

    当我发现在 Lumia 920 上运行的应用程序的 WP7 版本加载数据的速度是在同一设备上运行的 WP8 版本的 2 倍时 我正在对多种算法进行基准测试 以找到加载应用程序中所有数据的最快方法 然后 我编写了以下独立代码来测试 WP8 中
  • python tarfile 中 tar --strip 的等效功能

    我有一个具有以下目录结构的 tar 文件 a b c xyz txt 我想通过忽略父目录 a 来从此 tar 文件中提取文件 提取后 我期望以下目录结构 b c xyz txt 对于 tar 命令 我们可以使用 strip 1 选项 如何在
  • 将 DataTable 打印到 .NET 中的文本框/文本文件

    是否有预定义或 简单 的方法将数据表写入文本文件或 TextBox 控件 使用等宽字体 例如 DataTable Print Column1 Column2 v1 v2 v3 v4 v5 v6 Edit 这是一个初始版本 vb net 如果
  • 在“git pull”我的 Django 项目后重新启动/重新加载 Gunicorn(通过 Upstart)的更好方法

    我正在寻找比sudo restart projectname每次我发出git pull origin master 它会下载我对 Django 项目的最新更改 这restart我相信该命令与 Upstart 有关 我用它来启动 停止我的 G
  • 是否可以在水平面上制作 CSS3 列?

    我想知道是否可以水平生成 CSS3 列 例如 如果我有段落 a b c 和 d 并且我给它们 列数 2 则输出将是 a c b d 我想创建该列 以便输出变为 a b c d 有谁知道使用 css3 列时这是否可能 我希望我的页面是可扩展的