如何使CSS宽度来填充父级?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (34)

我相信这个问题以前有人问过,但我似乎找不到答案。

我有以下标记:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

我的愿望是让Foo有宽度600px(width: 600px;)并使酒吧具有下列行为:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

换句话说,不是将条形图的宽度设置为592px我想将条形图的外部宽度设置为100%所以它被计算成592px。重要的是我可以把foo的宽度改为800px当呈现时,BAR会计算,而不是我必须手工计算所有这些实例。

这在纯CSS中是可能的吗?

更有趣的是:

  • 如果#bar是桌子吗?
  • 如果#bar是文字区吗?
  • 如果#bar是输入?
  • 如果#foo是一个表单元格(td那是吗?(这是否改变了问题,还是问题相同?)
提问于
用户回答回答于

table#bar需要将宽度设置为100%,否则它将仅限于它确定需要的宽度。但是,如果表行的总宽度大于bar它将扩展到所需的宽度。如果我记得你可以通过设置display: block !important;虽然我已经有一段时间没有解决这个问题了。(如果我错了,肯定有人会纠正我的)。

textarea#bar我认为是块级元素,因此它将遵循与div相同的规则。这里唯一的警告是textarea的属性colsrows在字符列中测量。如果这是在元素上指定的,它将覆盖CSS指定的宽度。

input#bar是内联元素,因此在默认情况下不能指定宽度。然而,类似于textareacols属性,它有一个size属性中可以确定宽度的元素。也就是说,可以通过使用display: block;在你的CSS里。然后它将遵循与div相同的呈现规则。

td#foo将呈现为table-cell有点疯狂。这里的底线是,就你的目的而言,它的表现就像div#foo限制其内容的宽度。这里唯一的问题是列中潜在的可解包装文本,这会使它忽略你的宽度设置。而且,列中的所有单元格都将得到最宽单元格的宽度。


这是块级元素的默认行为--也就是说,如果宽度为auto(默认值)那么它将是包含元素的内部宽度的100%。所以本质上:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

会给你你想要的。

热门问答

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券