有没有简单的 3 列、纯 CSS 布局?

2023-11-29

不需要以下内容的一种:

  1. 对图像的依赖(即“假柱”)
  2. 专门为 IE 添加的某种怪异或“hack”
  3. 要求 IE 以怪异模式运行
  4. 没有像三个 DIV 之一与其他 DIV 重叠那样的奇怪现象(即“圣杯”)
  5. 边距设置为高负数,使它们远离视图屏幕(再次“圣杯”布局)

我在 CSS 中找不到不依赖上述内容之一的 3 列布局。依赖上述之一似乎否定了使用 CSS 相对于表格的许多优势。我不想每次想要更改左栏的宽度时都必须拿出 Photoshop 并调整图像大小。我不想拿出计算器来计算我的 DIV 距离屏幕一侧有多少像素。

我应该提到我正在寻找等高布局。

Anyone?

编辑:我正在寻找 100% 的宽度,中心柱是液体。

编辑:我还希望以像素为单位指定左列和右列的宽度。

编辑:背景可以是透明的,但我想要在列之间有一条一直向上和向下延伸的分界线。


当你谈论 CSS 时,没有“简单”这样的东西。

但有一个简单的解决方案,可以跨浏览器、优雅地降级并且完全兼容 HTML 和 CSS:使用包含三列的表格。

推理:DIV 并不意味着具有相同的动态高度。因此,CSS对此不支持。如果您需要一个块元素来确保其子元素具有相同的高度,那么这就是表格的用途。

[编辑] 很抱歉冒犯了你们所有的 CSS 狂热分子,但是,坦率地说,当某些东西不是为做某事而设计的,而你滥用了它,并且它不起作用时,请停止抱怨,好吗? DIV 不是 TABLE,如果不依赖 hack 就无法将其用作 TABLE。

[EDIT2] 正如已经说过的各个地方,不使用表格进行布局的原因是,在早期,表格是only设计元素并导致 HTML 具有数十个嵌套表。那很糟。但这并不意味着你must not使用单个表格将所有内容放置到位,然后依靠 CSS 使里面的内容看起来正确。

大脑就像一个降落伞:拥有它很好,但只有在打开时才有用。

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

有没有简单的 3 列、纯 CSS 布局? 的相关文章

  • Chrome 不渲染
    标签,FF 渲染

    我有一个非常烦人的问题 我的网站有一个表单 可以在 Firefox 中运行 但不能在 IE 或 Chrome 中运行 它是用 WordPress 的 Gravity Forms 制作的 但这可能与该问题无关 因为另一个表单插件也出现了同样的
  • php 在内容前插入十六进制字符数

    我正在将网站移动到新服务器 旧服务器有 php 5 3 2 新服务器有 php 5 5 9 Centos httpd Apache 2 2 26 我已经复制了文件 它工作正常 除了唯一奇怪的事情 一些奇怪的十六进制数字被插入到页面内容之前
  • 标题的固定高度和更改宽度(HTML 表格)

    我需要确保表格标题的高度是固定的 并且宽度是根据标题单元格内容进行调整的 标题文本最多显示两行 我们如何使用样式来做到这一点 另外 我想确保表行的宽度与标题行的宽度相同 即标题行决定宽度 注 目前 交易部门负责人别名 是按行排列的 它需要分
  • Bootstrap 4 行布局没有响应

    我正在使用 Bootstrap 4 在 MEAN 堆栈上为新闻文章布局创建一个 html 模板 但这应该不重要 对于这种总体布局的要求是 一篇 特色 文章位于其自己的列中 而其他 8 篇文章位于另一列中的两行中 当在较小的屏幕或移动设备上查
  • CSS:仅背景不透明度,而不是内部文本[重复]

    这个问题在这里已经有答案了 我有这个注册表框 我真的很喜欢背景如何变得不透明 透明为 25 85 但后来我注意到文本和表单元素也变暗了一点 所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西 regForm z index 11
  • 使用 XPath 获取内部有链接的段落文本

    我正在使用 XPath 解析 HTML 页面 并希望获取某些特定段落的完整文本 包括链接文本 例如我有以下段落 p class main content This is sample paragraph with a href http g
  • 使用 jQuery 的 .trigger('dragstart') 实现 HTML5 的拖放功能时如何 .setData/.getData

    当使用 jQuery 的 trigger dragstart 在具有 ondragstart drag event 属性的元素上触发函数时 如何使用 setData getData 实现 HTML5 在触摸设备上的拖放 流程示例 用户通过
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 垂直对齐材质图标

    我正在尝试在导航菜单中垂直对齐 下拉箭头 我尝试过各种方法 例如vertical align middle display inline block 之类的东西 但这根本没有帮助 http img02 imgland net jfCmDoW
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • 等待动态加载脚本

    在我的页面正文中 我需要插入以下代码作为 AJAX 调用的结果 p Loading jQuery p p Using jQuery p 我不能使用 load 由于文档已经加载 因此该事件不会触发 这安全吗 如果没有 我如何确保在执行自定义生
  • javascript获取网页中选定文本的段落

    突出显示文本后 我想获取所选文本所在的段落 var select window content document getSelection 请问有什么指点吗 这实际上很难做到 因为你必须考虑六种情况 所选内容不在一个段落内 简单 整个选择都
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • 如何使链接悬停时的背景图像模糊?

    当您用鼠标光标悬停链接时 我想让我的背景图像模糊 5 像素 有什么简单的方法可以实现这一点吗 我有点纠结于类和 id 在这里 pic background url http www metalinjection net wp content
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • 如何显示不同页眉的页面? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在为我的学校项目开发网站 但我遇到了一个问题 我在每个页面上显示一个标题 我的标题之一包含登录表单 另一标题包含用户名 搜索栏等 问题是
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • HTML:JavaScript:阻止表单提交并调用 Javascript 函数

    我想在按下表单中的提交按钮时进行 AJAX 调用 事实上我无法删除

随机推荐

  • 如何使用 Python 列出远程主机目录中的文件? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我需要从 a 获取文件列表远程主机目录 在我的本地计算机上运行代码 是类似的东西os listdir at 远程主机 不是os lisdir 在运行 python 代码的本地计算
  • MySQL - 使用 JOIN 和 WHERE 确定平均小时数

    我正在使用 MySQL 学习下一个科技课程这依赖于以下架构 我当前的任务是找出一个特定项目的平均工作时间 这些时间位于项目 员工数据库 而项目名称 Washington Avenue Barber 位于projects数据库 我尝试使用如下
  • 通过 C# 应用程序测试网站是否处于活动状态

    我正在寻找通过 C 应用程序测试网站是否活跃的最佳方法 背景 我的应用程序包括Winform用户界面 一个后端WCF服务 and a website将内容发布给 UI 和其他使用者 为了防止由于缺少 WCF 服务或网站关闭而导致 UI 启动
  • 如何(简单地)从java生成POST http请求来进行文件上传

    我想使用 POST http 事件从 java 应用程序 小程序上传文件 我想避免使用 SE 中未包含的任何库 除非没有其他 可行 选项 到目前为止 我只提出了非常简单的解决方案 创建字符串 缓冲区 并用兼容的标头填充它 http www
  • Jqplot 的 IE8 打印问题

    我正在使用 IE8 测试 jqplot 当我尝试打印时 轴标签发生偏移 我使用 Andrew Bullock 的 Canvashack 作为解决方法 http blog muonlab com 2010 06 02 getting posi
  • Apache Beam:固定窗口触发器

    根据下列的文档中指出 如果您没有明确指定触发器 您会得到如下所述的行为 如果未指定 默认行为是在以下情况下首先触发 水印经过窗口末尾 然后每隔一段时间再次触发 时间有迟到的数据 对于固定窗口来说 这种行为也成立吗 例如 您假设固定窗口应该有
  • Flutter web:打开直接 URL 导航在本地工作但在部署后不起作用

    I am trying to implement Flutter web url navigation in my application When I am trying to open http localhost 7357 priva
  • 将效果应用于 iPhone 相机预览“视频”

    我的目标是编写一个自定义相机视图控制器 可以使用后置摄像头和前置摄像头 如果有 以所有四个界面方向拍照 正确旋转和缩放预览 视频 以及全分辨率照片 允许将 简单 效果应用于预览 视频 和全分辨率照片 实现 在 iOS 4 2 Xcode 3
  • 生成器可以递归吗?

    我天真地尝试创建一个递归生成器 没用 这就是我所做的 def recursive generator lis yield lis 0 recursive generator lis 1 for k in recursive generato
  • top_n 函数返回的行数超出预期

    我对 r 很陌生 而且很累 我想我的大脑当前无法正常工作 但对我来说 下面的代码应该只返回 10 行 它返回 66 这是为什么 library dplyr a lt structure list calls in range c 17 14
  • Nginx - 使用/子文件夹重定向反向代理 Ghost 博客

    我有一个正在运行的 nginx 实例 其规则如下 但我很难将所有请求指向domain com ghost 我尝试修改location 阻止到location ghost 但没有成功 我刚刚从 Ghost 应用程序中收到 404 错误 有什么
  • IOS:无需 iphone/ipad 邮件应用程序即可发送邮件

    我想创建一个有 5 个文本字段和一个 textView 的应用程序 1 Name 2 Surname 3 Telephone 4 your email user email not address email receiver 5 city
  • jQuery 获取带有 id 的单击单元格的表头名称

    我有一个表 在该表中我有值id edit 现在 我想要的是当我单击任何单元格时获取相应列的标题名称 到目前为止 根据之前提出的问题 我得到的是 body on click td edit function var th this close
  • Javascript 正则表达式只允许正数

    我用它来测试数字 d 但我需要确保它大于零 同时仍然允许 0000123123123 例如 你可以写 d 1 9 d 零个或多个数字 后跟一个非零数字 再后跟零个或多个数字
  • 按比例调整图像大小

    我想将上传的图像调整为宽度 180px 高度成比例 有没有任何课程可以做到这一点 感谢帮助 我认为这个问题可以用实际的代码示例来回答 下面的代码向您展示了如何调整目录中图像的大小uploaded 并将调整大小的图像保存在文件夹中resize
  • iphone 平铺图像

    我有一个 1280 x 1664 的图像 我想使用 Apple 提供的 ScrollViewSuite 示例 但我需要将此图像剪切到多个缩放级别 那么 有人知道如何在多个缩放级别上平铺图像吗 一定有一种简单的方法可以将图像填充到 256x2
  • 处理交易时虚拟机异常:气体耗尽

    我正在使用 testrpc web3 1 0 和 Solidity 构建一个简单的 Dapp 但我总是收到此错误 并且找不到问题所在 请帮忙 我的 JavaScript 文件 const Web3 require web3 const fs
  • 如何在 Kotlin Desktop Compose 中触发 PC 键盘输入

    我将使用 Kotlin Jetpack Compose 开发一个 POS 系统 我想知道如何在我的项目中触发键盘输入事件 在 Compose Desktop 中 您可以使用以下方式侦听关键事件onKeyEvent Window范围 Wind
  • Discord Bot + Google Cloud Run:“容器无法启动。”

    我正在尝试部署一个用 python 编写并通过 Docker 容器化到 Google Cloud Run 的简单 Discord 机器人 Dockerfile 非常简单 FROM python 3 9 WORKDIR app COPY re
  • 有没有简单的 3 列、纯 CSS 布局?

    不需要以下内容的一种 对图像的依赖 即 假柱 专门为 IE 添加的某种怪异或 hack 要求 IE 以怪异模式运行 没有像三个 DIV 之一与其他 DIV 重叠那样的奇怪现象 即 圣杯 边距设置为高负数 使它们远离视图屏幕 再次 圣杯 布局