时间戳

首页 > 解决方案 > DIV 填充干扰宽度

html - DIV 填充干扰宽度

问题描述

我有一个 100% 宽度和一些填充的 div。div 比它的包装器大。显然我不希望这种情况发生。我不能使用宽度上的像素，因为宽度是动态的。

我尝试了各种 CSS 技巧并通过 stackoverflow 进行了搜索。我无法想象没有人问过这个可能很简单的问题，但到目前为止我真的没有发现任何有用的东西。也就是说，如果这可能仍然是一个重复的问题，请原谅我。

.entryrow {
	position:relative;
	width:100%;
	height:100px;
	background: linear-gradient(#2c647b,#191654);
	box-sizing:border-box;
	display: inline-block;
	padding:5px;
	margin:5px 5px 0 5px;
	border:1px solid #ccc;
	cursor:pointer;
}
<div style="width:100%;background:black;height:120px;">
  <div class="entryrow">
    Blubb
  </div>
</div>

标签： htmlcss

解决方案

用于calc(100% - 10px);宽度（= 100% 减去 2 x 5px 边距）（边框不计算在内，因为您使用box-sizing: border-box）

.entryrow {
	position:relative;
	width:calc(100% - 10px);
	height:100px;
	background: linear-gradient(#2c647b,#191654);
	box-sizing:border-box;
	display: inline-block;
	padding:5px;
	margin:5px 5px 0 5px;
	border:1px solid #ccc;
	cursor:pointer;
}
<div style="width:100%;background:black;height:120px;">
  <div class="entryrow">
    Blubb
  </div>
</div>

推荐阅读