html布局直接填充,html – 具有固定填充/边距的CSS液体布局

最新推荐文章于 2022-01-12 22:14:11 发布

weixin_39603050

最新推荐文章于 2022-01-12 22:14:11 发布

阅读量164

点赞数

文章标签： html布局直接填充

本文探讨了在不使用额外HTML标记的情况下，如何在流体布局中处理像素宽度、填充和边距的问题。作者通过一个简单的HTML/CSS布局示例展示了当向浮动元素添加内边距或边框时，布局出现的变化，并表达了希望找到一种方法，在保持百分比宽度的同时，能够将填充或边距包含在内。负边距技术被提及，但并不完全满足需求。文章寻求一种技术解决方案，允许在不改变元素宽度的情况下实现内边距或边距的添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想知道是否有人知道如何将像素宽度填充或边距合并到流体柱设计中,而无需额外的html标记.

为了进一步说明,请考虑一个简单的html / css布局,如下所示：

.cont{width:500px;height:200px;border:1px solid black;}

.col{float:left;}

#foo{background-color:blue;width:10%;}

#bar{background-color:yellow;width:30%;}

#baz{background-color:red;width:60%;}

Foo

Bar

Baz

这显示正确(忽略可以处理的杂项css显示错误).但是,一旦你向col类添加10px填充,浮动不再显示为内联.如果您想将3px边框放入col类,也是如此.我已经看过css技术,人们将使用负边距来反转从盒子模型创建的添加像素,但它仍然不会减少< div>宽度.所以基本上,我想要的是一种技术,可以让我保持10％的宽度,但10％的10％是填充(或边距或不是).