div 真的可以覆盖布局上所有内容的 table 吗?

2024-02-13

也许已经有一个关于这个主题的问题,但我找不到它。

我的问题很简单,
我可以在页面布局上仅使用 div 吗?

例如,我在创建一个带有角的 div 时遇到了麻烦。

A_____B______C  
|            |
D     E      F
|            |
G_____H______I

将所有字母作为带有一些背景的div,而字母E是放置内容的地方,并且它是动态的,因此它可以得到任意高度,而整个窗口的宽度将为100%(还有另一个div作为菜单浮动该 div 的左侧,但我在这里没有考虑它)。
在表中,我做得很快,没有任何技巧,但对于 div 我就是做不到。
我无法使div D和F的高度与div正确扩展,其余都可以

so,
1.div真的可以代替table进行布局吗?
2. div 可以在没有 css 兼容性黑客的情况下替换表格吗?

(顺便说一句,这不是我的 div 和 css 布局的唯一问题,其中 table 可以轻松完成)


您的示例在基本 CSS 中完全可行,使用相对定位元素内的绝对定位。看看这个:

http://www.ulmanen.fi/stuff/box.php http://www.ulmanen.fi/stuff/box.php

所以,在回答你的问题时,div 确实取代了布局的表格。

第二个问题是什么?应该在需要表格的地方使用表格:在表格数据中。如果您需要在表格中呈现某些内容,请使用表格。只是不要将它们用于布局。

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

div 真的可以覆盖布局上所有内容的 table 吗? 的相关文章

  • Java将Html转换为图像

    我生成了一个包含我客户信息的 Html 以便他可以将它们附加到您的网站或电子邮件中 但有些客户要求我生成图像而不是 html 我使用下面的代码生成图像 运行顺利 但是 html 中包含的图像没有生成 当我在浏览器中打开 HTML 代码时 它
  • CSS过渡div晃动

    为什么当我使用位置绝对和百分比宽度时 当我将鼠标悬停在上面的 div 上时会出现此故障 有例子 我在更复杂的网站上遇到了这个故障 div class box text div div class container div box widt
  • 强制 Flexbox 在特定项目之后换行(方向:列)

    我有导航 各个条目通过 Flexbox 一层一层地显示 方向 列 如果导航条目获得 分隔符 类 则导航应进入下一行 是否可以强制 Flexbox 执行 换行 nav display flex flex direction column na
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • Vue js按钮冻结dom

    我试图在按下按钮时切换包含加载动画的跨度 直到使用 v if 函数完成 但是当我按下按钮时 DOM 冻结并且 span 元素保持不变 直到函数调用结束 如何让 DOM 不冻结并显示加载图标 非阻塞按钮按下可能是一个解决方案 HTML
  • 如何在Python + Selenium中获取元素的值

    我在我的 Python 3 6 3 代码中得到了这个 HTML 元素 作为 Selenium网页元素当然 span class ocenaCzastkowa masterTooltip style color 000000 alt 5 sp
  • 调整 Twitter-Bootstrap 中按钮的大小

    我正在开发一个适合移动设备的网络应用程序 我希望它有一个非常简单的用户界面 包括大到连巨人安德烈都可以轻松点击的按钮 问题是 我没有看到通过将引导按钮的宽度或高度设置为百分比 像素数或简单地让它们填充其容器来显式调整引导按钮大小的简单方法
  • C# html-helper 扩展现有方法而不覆盖?

    我已经搜索过这个问题并发现可能answer https stackoverflow com questions 11232041 how to create an html helper to extend textboxfor to ad
  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无
  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • 如何防止在达到一定字符数后向文本区域输入内容?

    使用下面的代码 任何超过指定最大值的输入都将被删除 但这会产生一种效果 即键入字符后立即将其删除 我宁愿简单地阻止输入字符
  • 通过电子邮件发送在 HTML5 画布上创建的图像

    我有一个画布 用户可以通过交互来更改设计 现在 用户完成更改后 可以提交他的设计及其电子邮件 ID 但为了提交设计 我使用以下方法将画布转换为图像http www nihilogic dk labs canvas2image http ww
  • IE8 底部:0 在位置:绝对的行为类似于位置:固定

    我有一个 DIV 必须始终位于页面的底部 左侧 类似于页脚菜单 div bottom menu position absolute z index 1 left 0 bottom 0 width 90 我的页面定义了最小高度 当用户将其缩小
  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • 从 UnityWebGL jslib 返回字符串

    我想使用 jslib 来获取网址参数 像这样的代码 jslib GetUrl function var s var strUrl window location search var getSearch strUrl split var g
  • Windows 上的锯齿字体 - Chrome 和 Safari

    我使用以下代码在网页上使用自定义字体 font face font family HelveticaNeueBold src url fonts HelveticaNeueBold eot src url fonts HelveticaNe
  • JQuery Mobile - 内联显示 HTML 表单

    Goal 在 Jquery Mobile 中的同一行显示文本框和提交按钮 Problem 它们不会显示在同一行 我曾多次尝试在同一行显示文本框和提交按钮 但它从未起作用 这是我的代码和我使用的组合
  • 处理 iPhone X 系列上 Chrome 浏览器中的安全区域

    对于我管理的网站 我正在使用新的 iPhone X 系列屏幕安全区域safe area inset
  • 通过jquery ajax()和serialize()提交html表单

    我想通过 jquery ajax 提交此表单 这是我所做的 但它不起作用 即表单正在提交并刷新页面 但我没有看到响应 即在同一页面上打印数组 HTML

随机推荐

  • Vue 警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

    我正在尝试使用 Vue js 和 Nuxt 在表中循环 tr 但是当我加载页面时出现以下错误 vue runtime esm js 2b0e 619 Vue warn 客户端渲染 虚拟 DOM 树与服务器渲染的内容不匹配 这是 可能是由不正
  • Eclipse 停止编译 RenderScript 文件

    我的 Android 项目中有一个 RenderScript rs 文件 SomeScript rs 在我开发它的过程中 它运行得很好 但后来我在 Eclipse 中清理了工作区 现在它似乎没有将该文件识别为 RenderScript 文件
  • Symfony:错误:尝试调用函数“ctype_digit”

    我尝试在服务器上安装 Symfony 3 3 项目时遇到错误 我正在使用 Apache HTTP 服务器和 PHP 7 0 当我访问 app dev php 时 它显示该错误 UndefinedFunctionException Attem
  • 如何删除旧的不需要的设备?

    所以这与我之前发布的问题有关 如何删除4 3模拟器 https stackoverflow com q 10834817 96716 我愚蠢地安装了 iOS 5 0 模拟器 现在我上一篇文章中提供的技术不起作用了 当您删除 5 0sdk 然
  • 自定义语言的 Gradle 插件

    我有一种自定义语言 假设它是 MyLang 但它可以是任何语言 我想为其制作一个插件 该插件需要 能够识别 DSL 给定语言的源集 能够使用可执行文件 编译器 来编译它们 我能够创建一个带有编译任务 还为空 的插件 并使用 Language
  • 将 XWPFRun 拆分为多个运行

    我正在尝试修改existingWord 文档自动将其中的某些关键字加粗 举个例子 敏捷的棕色狐狸跳过了懒狗 1 会成为 快速棕色fox跳过懒惰者dog 2 我的问题是 1 是一次运行 2 变成 5 次运行 5 作为狗后面的句点不是粗体 但它
  • netty中非阻塞通道中的SO_TIMEOUT

    如果通道在超时毫秒内未收到读取 响应 SO TIMEOUT 是否会使非阻塞通道过期 bootstrap group workerGroup channel NioSocketChannel class handler channelInit
  • JBoss 5.0.1 上的 servlet jar 文件在哪里?

    大家好 我正在尝试设置要在 JBossAS 5 0 1 上运行的构建文件 并且我需要找到应该用于构建的 servlet jar 文件 我看过的所有网页似乎都表明该文件是 javax servlet jar 并且它应该位于 C server
  • 尝试播放音频 (.wav) 文件时没有声音

    我有一个非常简单的类 可以使用以下代码播放声音文件 import java io File import java io IOException import javax sound sampled AudioSystem import j
  • Vuetify 数据表不显示数据

    Vuetify 数据表不显示数据 显示显示了 1 行中的 1 行 但表体为空 我的组件代码
  • 从子表单更改父表单属性的正确方法是什么?

    我只是想知道我是否以正确的方式这样做 我有两个表单 一个父表单和一个子表单 选项对话框 要从子表单更改父表单中的属性 我使用如下代码 Create an array of all rich textboxes on the parent f
  • 部署时捆绑器错误

    我目前正在使用guard 即guard coffeescript gem 在我的OSX 开发系统上编译我的javascript 将来我可能会添加更多的guard 任务 我添加了rb fseventgem 到我的 Gemspec 现在我看到在
  • 我应该在临时/生产环境中使用 PHPUnit 吗?

    我已经安装了 PHPUnit 框架来执行单元测试 我已经编写了测试用例 并且还使用了现有的 PHPUnit 库进行测试 是否需要在临时和生产环境中配置 PHPUnit 框架 如果是这样 phpunit 测试框架和相关文件会在暂存和生产中占用
  • Angular2 ng-bootstrap:使用不同的数据重用模态模板

    我正在构建一个类似仪表板的界面 其中包含一组包含可比数据的实体 这些实体中的每一个都有一个编辑按钮 我想用它来打开一个显示相应数据的模式 我想重用相同的模式模板 并显示来自单击编辑按钮的实体的数据 我在用Angular2 with ng 引
  • 检查 Java 中的内存布局

    我正在尝试继承 出于教育目的 我想检查为各种对象分配的地址以及对象内的字段 有没有一个工具可以让我查看 JVM 正在使用哪些内存以及它的用途 例如 如果我有两个课程 class A int i j int f class B extends
  • 在 cap 部署时预编译资产时收到“警告:已初始化常量”

    目前 我在通过 capistrano 进行生产部署时遇到了关于部署 资产 预编译的奇怪警告消息 当我第一次部署演示 Rails 项目时运行 cap 生产部署时 收到以下警告消息 并且部署失败 cap 中止
  • 如何通过创建React应用程序启用JIT(即时模式)?

    我尝试自己在 create react app 中设置 JIT 但它似乎不起作用 因为样式没有更新 我正在使用 craco 来构建带有 tailwind css 的应用程序 并且还添加了 TAILWIND mode WATCH 因为他们建议
  • 如何自动装配 Spring 环境对象

    我正在尝试从应用程序对象内的 properties 文件获取属性 我对如何做到这一点的唯一了解是通过Environment object 它在我的配置中运行得很好 Configuration ComponentScan basePackag
  • 使用基于 Spark 数据集的 ML API 时初始化逻辑回归系数?

    默认情况下 逻辑回归训练将系数初始化为全零 但是 我想自己初始化系数 这将很有用 例如 如果之前的训练运行在几次迭代后崩溃了 我可以简单地使用最后一组已知的系数重新开始训练 这对于任何基于数据集 数据帧的 API 最好是 Scala 是否可
  • div 真的可以覆盖布局上所有内容的 table 吗?

    也许已经有一个关于这个主题的问题 但我找不到它 我的问题很简单 我可以在页面布局上仅使用 div 吗 例如 我在创建一个带有角的 div 时遇到了麻烦 A B C D E F G H I 将所有字母作为带有一些背景的div 而字母E是放置内