Question

我们假设有一个固定宽度的网站。我需要放置3个盒子，盒子之间有一些空间（填充）。但我不需要在左侧和右侧填充。

我该怎样摆脱它？当我将padding-left或padding-right设置为相应的框时，框不再具有相同的尺寸（宽度/高度）。

这是我的代码：

.wrap {
	margin: 0 auto;
	width: 1024px;
	height: 800px;
	background-color: yellow;
}

.box {
	box-sizing: border-box;
	width:33.3%;
	height: 200px;
	float: left;
	padding: 10px;
}

.box-inner {
	background-color: grey;
	width: 100%;
	height: 100%;
}

<div class="wrap clearfix">
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
</div>

Answer 1

我会使用以下CSS：

.box {
    padding-left: 10px;
}
.box:nth-child(3n+1) {
    padding-left: 0;
}

这将隐藏第一个元素和第四个元素的填充。由于填充位于左侧，因此右侧的每个元素都没有右边的填充。

Here's the demo

Answer 2

假设你不想改变盒子模型（flexbox提供了几个选项来解决这个问题），这里有两个选择器组合：

这适用于单行容器。每行的项目数无关紧要：

.box + .box { padding-left: 10px }

使用adjacent sibling selector，将填充应用于紧跟.box元素之前的所有.box元素。

因此，第一个项目不会有填充，最后一个项目右侧没有空格。

.wrap {
    margin: 0 auto;
    width: 1024px;
    height: 800px;
    background-color: yellow;
}

.box {
    box-sizing: border-box;
    width: 33.3%;
    height: 200px;
    float: left;
    padding: 10px 0;                 /* adjusted */
}

.box + .box { padding-left: 10px; }  /* new */

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

<div class="wrap clearfix">
    <div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
</div>

这适用于单行和多行容器，每行有三个项目：

.box:not(:nth-child(3n+1)) { padding-left: 10px; }

从第一个开始，将填充应用于除（:not）之外的所有元素，从第一个开始。

.wrap {
    margin: 0 auto;
    width: 1024px;
    height: 800px;
    background-color: yellow;
}

.box {
    box-sizing: border-box;
    width: 33.3%;
    height: 200px;
    float: left;
    padding: 10px 0;                               /* adjusted */
}

.box:not(:nth-child(3n+1)) { padding-left: 10px; }  /* new */

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

<div class="wrap clearfix">
    <div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
</div>

Answer 3

虽然所有其他答案似乎都是正确的，但我会使用flexbox来实现，因为它为您提供了更大的布局灵活性。 Flexbox具有名为justify-content的特殊属性，您要为其指定的值为space-between。

.wrap {  
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-content:flex-start;
      margin: 0 auto;
      width: 1024px;
      height: 800px;
      background-color: yellow;
    }

.box {
    box-sizing: border-box;
    width:calc(33.3% - 5px);
    margin-bottom:5px;
    height: 200px;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

JSFiddle

Answer 4

您需要使用：last-child 和：first-child 或甚至：nth-child 伪元素进行样式设置和使用CSS calc 函数确保从百分比宽度中减去填充。

Answer 5

使用.box:nth-child使中间框没有填充，并且任何一个框都没有底部填充。

＆＃13;

.wrap {
	margin: 0 auto;
	width: 1024px;
	height: 800px;
	background-color: yellow;
}

.box {
	box-sizing: border-box;
	width:33.3%;
	height: 200px;
	float: left;
  padding: 10px 10px 0 10px;
}

.box:nth-child(2),
.box:nth-child(5) {
  padding-left: 0;
  padding-right: 0;
}

.box-inner {
  background-color: grey;
  width: 100%;
  height: 100%;
}

＆＃13;

<body>
	<div class="wrap clearfix">
		<div class="box"><div class="box-inner"></div></div>
		<div class="box"><div class="box-inner"></div></div>
		<div class="box"><div class="box-inner"></div></div>
		<div class="box"><div class="box-inner"></div></div>
		<div class="box"><div class="box-inner"></div></div>
		<div class="box"><div class="box-inner"></div></div>
	</div>
</body>

＆＃13;

从一行中的第一个和最后一个元素中删除填充

5 个答案: