Question

我有一个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>

Answer 1

使用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>

Answer 2

在calc()上尝试使用CSS的.entryrow功能。

.entryrow {
	position:relative;
	width:calc(100% - 10px); /* 10px for the margin applied below */
	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:400px;">
  <div class="entryrow">
    Blubb
  </div>
</div>

Answer 3

只需将元素保留为块元素，就无需使用width:100%或box-sizing:border-box（最好将其保留，以避免将来出现与填充/边框和宽度相关的任何问题）

.entryrow {
  position: relative;
  height: 100px;
  background: linear-gradient(#2c647b, #191654);
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

<div style="background:black;overflow:hidden">
  <div class="entryrow">
    Blubb
  </div>
</div>

Answer 4

有时候，更少的代码就是更多;）

编辑：为了证明使用此解决方案创建多行将得到OP的预期结果，其他大多数答案仍然会存在对齐问题。

例如，如果您接受多于一行，则可接受的答案（https://stackoverflow.com/a/51928740/572771）将切断该行的顶部和底部。

.wrapper {
  background:black;
  padding: 1%
}
.entryrow {
  height:100px;
  background: linear-gradient(#2c647b,#191654);
  border:1px solid #ccc;
  padding: 1%;
  margin-bottom: 1%;
}

<div class="wrapper">
  <div class="entryrow">
    Blubb1
  </div>
  <div class="entryrow">
    Blubb1
  </div>
</div>

Answer 5

如果将max-width: 100px;赋予包装的div，将max-width: 90px;赋予.entyrow，则效果很好。显然，您只是对div width: 100%;说，但是如果它们100％都没有填充空间。取决于您在最大宽度中输入的像素数。希望能有所帮助。

DIV填充干扰宽度

5 个答案: