div宽度高度根据文本?

2024-01-05

我想要根据文本大小选择框的宽度高度。我尝试使用下面的代码,它可以工作,但不是根据文本的节框的最佳宽度和高度。我设计了三个css id,第一个是#wbp_row,第二个是#wbp_col,最后一个是文本id名称是#tridtext

I try these codes with html5 and css3 techniques. 

我的CSS代码:

#wbp_row {
position:relative;
display:table;
border:solid 1px #0F0;
min-width:auto;
max-width:960px;
max-height:auto !important;

margin: 0 auto;

}
#wbp_col {
position:relative;
display:table-row;
width:320px;
min-height:auto!important;
border:1px solid #000;
float:left;
margin:0 0 0 0px;
padding:0;


}

#wbp_row #threedtext {
font-size:70px;
    max-height:auto !important;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
/*text-shadow: 0px 4px 0px rgba(82,82,82,.80),
         2px 4px 3px rgba(0, 0, 7, 0.50),
         3px 8px 3px rgba(0,0,0,.40),
         0px 12px 10px rgba(0,0,0,0.1);*/
         color: rgba(141, 198, 63, 1);
         padding:0;
         line-height:normal;
         overflow:auto;
         position:relative;
        border:1px solid #F00;

}

HTML 代码:

<section id="wbp_row">
<Section id="wbp_col">
<p id="threedtext">Web</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Brand</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Print</p>
</Section><!--Cols codes end-->
</section><!--row code end-->

如果你像这样在“#wbp_col”中设置 width:auto

#wbp_col{width: auto;}

所以部分是根据文本大小调整其高度和宽度。

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

div宽度高度根据文本? 的相关文章

  • IE jquery click 仅适用于 li 中的文本,不适用于整个框

    我创建了一系列作为 li 的按钮 我希望用户能够单击它们 ul class item list li class item button style color 4bb2c5 1 li li class item button style
  • 滚动部分滚动并溢出

    我正在尝试使用脚本 Scrollify https github com lukehaas Scrollify https github com lukehaas Scrollify 但我的部分比用户的屏幕长 这意味着您首先必须向下滚动才能
  • 浏览器特定的 CSS 属性

    在哪里可以找到完整的 浏览器特定 css 属性 参考 我的意思是一些属性 例如 moz border radius这仅适用于 Firefox 或 webkit min device pixel ratio 这些示例仅适用于指定的 Web 浏
  • 何时使用
    换行符 vs CSS 定位?

    我经常想知道如何正确使用 br 越线 似乎它们经常被错误地用于定位或清除应该使用 CSS 的内容 W3schoools org 说使用 br 适用于空白行 但不适用于创造或分离 http www w3schools com tags tag
  • primefaces 元素无法加载我的 css 文件的 url

    当我将样式 css 放在同一个 xhtml 页面中时 它可以与我的页面一起使用 例如
  • 在这个页面中,悬停不起作用,我不知道为什么,而且页脚也没有占用 100% 宽度,即使我已经给了它

    我的编码是否不正确 或者悬停和页脚有什么问题 我需要知道 php 邮件程序是正确的还是我有错误 我无法找到错误 因为邮件功能在本地服务器上不起作用
  • scrapy获取同一个类的第n个子文本

    我附上了一张照片 我面临的问题是获取同一类的第一个元素 我想得到 adxHeader gt adxExtraInfo 1st one gt adxExtraInfoPart 1st one gt a text 我编写了以下代码但不起作用 任
  • 在原生 Android 应用程序中使用 WebView 整个布局有用吗?

    我目前正在开发一个原生 Android 应用程序 我的应用程序有很多活动 我要发展native安卓应用程序 但在某些情况下 我想使用webview整个布局只是一个网络视图 不是线性的或相对的或其他布局 只是一个网络视图 所有图像和其他内容都
  • 100% 宽度减去边距和填充[重复]

    这个问题在这里已经有答案了 我一直在四处寻找 但找不到适用于我自己的问题的解决方案 我正在开发一个移动网站 需要输入框为屏幕的 100 宽度 但我有padding left 16px and margin 5px这使得盒子超出了屏幕 所以我
  • php在html页面中创建额外空间

    我是网络开发新手 我真的被这个愚蠢的问题困扰了 当我在 html 代码之前插入 php 代码时 如下所示 它在我的页面顶部创建了额外的空白空间 并将整个内容 推下 是否有可能以某种方式避免创建额外的空间 如果 php 代码位于 html 的
  • JSDoc:如何在生成的文档中包含自定义 css 文件模板?

    JS文档docs https jsdoc app about configuring default template html say 将图像目录复制到输出目录 复制全部 将 myproject static 中的静态文件复制到输出目录
  • 如何使用表单上的提交按钮传递参数

    我想创建一个可以更改 PHP 制作的 mySQL 中的产品数据的程序 我有自动递增并指定每个产品的键列 当我单击编辑产品链接时 它将传递我从每个产品获得的键值 并链接到 editPage php Key data Key a href ed
  • 当我尝试转发电子邮件时,时事通讯无法隐藏 Gmail 上的响应内容

    我正在尝试写一份时事通讯 但当我测试时 我无法隐藏响应式内容GMail On Outlook and Yahoo一切正常 但如果我尝试转发电子邮件 隐藏的内容就会可见 我测试使用 putsmail https putsmail com gt
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 如何将 HTML 表格转换为 csv 格式?

    是否有 HTML 解析器或某些库可以自动将 HTML 表格转换为 CSV 数据行 Here is http www unix com shell programming scripting 45274 html table csv html
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • 有不同图像尺寸的缩略图 Bootstrap

    我想要包含不同大小和不同文本量的图像的缩略图 但我希望它们都具有相同的大小 像这样来自 Bootstrap 站点的示例 http getbootstrap com components thumbnails custom content 下
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐

  • sql - 两行之间的查询

    有疑问 我正在做一个选择 我需要抓取 2 行 我的值为 13000 00000 我需要抓住第 2 行和第 3 行 因为它 介于 10000 最小范围 和 15000 最小范围 之间 该语句仅引入第 2 行 select from TABLE
  • lambda 找不到我的 node_modules

    我正在尝试使用 lambda 上传 node modules 但我得到了 Cannot find module error 我已经设置了一个真正简单的 hello world js 文件 var async require async 我已
  • 如何在 Spark Scala 中将 null NAN 或 Infinite 值替换为默认值

    我正在将 csv 读入 Spark 并将架构设置为所有 DecimalType 10 0 列 当我查询数据时 出现以下错误 NumberFormatException Infinite or NaN 如果我的数据框中有 NaN null i
  • 使用 AJAX.NET 的 $get() 和 $find()

    我正在尝试遵循找到的 PageMethods 示例here http encosia com 2007 07 11 why aspnet ajax updatepanels are dangerous 但是 我在尝试调用时收到错误 get
  • Restlet HTTP 连接池

    我对 Restlet 相当陌生 编写了一小段代码来进行 HTTP 调用 它正在工作 但我想知道如何将 HTTP 连接池 apache 添加到其中 我找不到任何教程或参考代码 Client client new Client Protocol
  • 在 Java JFrame 中显示图像

    在 java JFrame 中的特定坐标处显示图像的最佳方法是什么 我知道有很多方法可以做到这一点 我只需要知道显示我计划在框架中移动的图像的最佳方式 将 ImageIcon 与 JLabel 结合使用是最简单的方法 实际上 您可以根据您的
  • 在 3d 中绘制 3 个向量

    我有 3 个向量 其中一个向量的角度为Phi 另一个角度为Teta 最后一个是点向量Y axe 计算完点后Teta Phi有一个功能 for teta 0 10 2 pi 2 for phi 0 10 2 pi 2 Y current v
  • android 蓝牙连接失败(isSocketAllowedBySecurityPolicy start : device null)

    我试图用蓝牙连接两部手机 galaxy note 1 galaxy note 2 但套接字连接失败 这是我的 LogCat I BluetoothService 24036 BEGIN mConnectThread D BluetoothU
  • 从左侧滑入CSS动画

    我想制作一个简单的动画 当页面加载时 我的徽标应该从框的左侧动画到右侧 我尝试了很多版本 但还没有成功 HTML div img src logo png alt logo style width 170px height 120px di
  • Kafka:使用java更改特定主题的分区数量

    我是 Kafka 新手 正在使用新的 KafkaProducer 和 KafkaConsumer 版本 0 9 0 1 java中是否有任何方法可以在创建特定主题后更改 更新其分区数量 我没有使用 Zookeeper 创建主题 当发布请求到
  • JavaScript 函数通过链式组合

    我检查了重复问题的可能性 并且无法找到准确的解决方案 我用 JavaScript 编写了一些函数链代码 如下所示 并且工作正常 var log function args console log args return function f
  • 浏览器同步无法用 gulp 重新加载

    我正在尝试按如下方式吞咽浏览器同步 var liveReload require browser sync create reload when something changes once scss is converted to css
  • 对话框的 Url 不适用于 angular.bootstrap (无限 $digest 循环)

    我有一个平均堆栈网站 我想用执行函数 https stackoverflow com a 45428344 702977绑定一个按钮以在对话框中启动该网站 function doSomethingAndShowDialog event cl
  • Tensorflow Keras 保留每批的损失

    我正在寻找构建 keras 模型架构的最佳实践的建议 示例 我一直在摸索 Model 子类和功能模型的各种迭代 但无法连接所有点 该模型应具有自定义指标和相关损失 其中 在训练期间 按批次计算指标 并在每个时期结束时根据批次计算的平均值计算
  • 无法解析符号“MediaSessionCompat”

    我无法导入MediaSessionCompat 导入整体的导入声明android support v4 media库不会显示在 Android Studio IntelliSense 中 并且无法解析其中任何内容的符号 我是否必须进行某种额
  • 悬停时动画不透明度 (jQuery)

    我们有一个链接 a href Some text span style width 50px height 50px background url image png span a 我们想要改变的不透明度 span 当链接悬停时带有一些动画
  • 基于接口未实现的通用约束

    我有一个带有工厂服务的应用程序 可以在解决必要的依赖项注入的同时构建实例 例如 我用它来构建对话框视图模型 我有一个如下所示的服务接口 public interface IAsyncFactory Task
  • 如何在实时服务器上调试 ASP.NET 应用程序 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个基于 net Framework 1 1 的旧 asp net Web 应用程序 它已经部署到实时服务器很多年了 现在我仅在实
  • 从模型调用辅助方法

    For my Predictions模型我创建了一个方法predictions helper rb像这样 module PredictionsHelper def time in date time date time between da
  • div宽度高度根据文本?

    我想要根据文本大小选择框的宽度高度 我尝试使用下面的代码 它可以工作 但不是根据文本的节框的最佳宽度和高度 我设计了三个css id 第一个是 wbp row 第二个是 wbp col 最后一个是文本id名称是 tridtext I try