html 通过忽略父div填充实现css 100%宽度的最佳方法

wgx48brx 于 2022-11-27 发布在其他

关注(0)|答案(2)|浏览(144)

对于下面的DOM，只有child 3应该具有100%的宽度，忽略/覆盖父容器的填充，其余子元素应该具有100%的宽度，同时也考虑填充

<div class="container">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
  <div class="child4"></div>
  <div class="child5"></div>
  <div class="child6"></div>
</div>

容器CSS的约束

.container {
    width: 300px;
    padding: 40px;
}

什么是实现这一点的最佳方式？实现这一点的一种方式是：

.child3 {
    width: 300px;
    margin-left: -40px; /*to offset parent container's padding*/
}

我确切意思的大概图表x1c 0d1x

Html

来源：https://stackoverflow.com/questions/74582595/best-way-to-implement-css-100-width-by-ignoring-parent-div-padding

2条答案

按热度按时间

osh3o9ms1#

如果您希望更动态，那么使用css变量将使您的代码更有效。
这里我们使用--padding变量。2要改变变量值，只需在:root中改变它。
我使用了1px边框来显示差异（黑色表示父级，红色表示子级）
用于宽度的公式i为：

total possible length when not parent padding is ignored + twice the padding(becuase padding acts on both side) - 1px(which is border)
而余量为-padding
代码片段：
第一个

赞(0）回复(0）举报 2022-11-27

vdgimpew2#

另一种方法是这样写（当我看到布局）...请原谅我，如果我错了，因为我删除了填充和添加边距的div代替，并匹配图像您添加到您的职位。
查看@Roko C. Buljan的时刻
我不知道你是否想这样做，所以让我知道它是否适合你，或者我是否必须删除我的答案。
AMO似乎不那么棘手。
第一个

赞(0）回复(0）举报 2022-11-27