CSS全宽网格 - 具有均匀边距的列

Question

我试图制作一个响应式网格，其中有4列填充桌面版本的整个屏幕宽度，但是添加边距以间隔它们显然意味着最后一列不是＆＃39 ; t填充屏幕的剩余宽度，或者下降到新行，具体取决于列的宽度。

CSS：

#servicesGrid
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.service
{
width:24.75%;
height:45%;
background:#262626;
display:block;
float:left;
margin:1px;
}

#servicesGrid .service:nth-of-type(1)
{
width:100%;
}

#servicesGrid .service:nth-of-type(2)
{
margin-left:0;
}

#servicesGrid .service:nth-of-type(5)
{
margin-right:0;
}

HTML：

<div id="servicesGrid">

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

    <div class="service"></div>

</div>

关于JSFiddle的示例：https://jsfiddle.net/4bw4p3LL/。

Answer 1

如果您对%使用width，我建议您也使用%作为边距。所以你一定会加起来100%。

这个想法是4*colwidth + 3*margins = 100%

所以，使用margin-right:0.5%除了最后一个（.col）之外的所有nth-of-type(5)个元素，那么宽度为100% - 3*0.5% = 98.5% / 4 = 24.625%

其中：100%是servicesGrid的宽度，3是前三个列的0.5%页边距数，98.5%是4 col占用的剩余空间，除以col的nr，得到每个col的宽度

#servicesGrid
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.service
{
	width:24.625%;
	height:45%;
	background:#262626;
	display:block;
	float:left;
	margin:1px 0.5% 1px 0;
}

#servicesGrid .service:nth-of-type(5)
{
	margin-right:0;
}

<div id="servicesGrid">
			
				<div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0">
				</div>
				
				<div class="service col"></div>
				
				<div class="service col"></div>
				
				<div class="service col"></div>
				
				<div class="service col"></div>
				
			</div>

Answer 2

您可以对calc使用width。这将允许您指定要从margin中减去的值（width）。请注意browser support，这是所有现代浏览器。

jsfiddle

.service {    
    width: calc(24.75% - 1px);
    height: 45%;
    background: #262626;
    display: block;
    float: left;
    margin: 1px;
}

Answer 3

一个选项是使用border伪造元素之间的空格，然后您可以使用box-sizing在width内包含边框。试试这段代码：

＆＃13;

＆＃13;

#servicesGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.service {
  width: 25%;
  height: 45%;
  background: #262626;
  display: block;
  float: left;
  box-sizing: border-box;
}
.service:nth-child(n+3) {
   border-left: 1px solid white;
}

＆＃13;

<div id="servicesGrid">
  <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

第二个选项

如果您可以使用Flexbox，请尝试以下代码：

＆＃13;

＆＃13;

#servicesGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display:flex;
  flex-wrap: wrap;
  align-content:flex-start;
  align-items:justyfy-content;
  justify-content: space-between;
}
#serviceWide {
  flex:0 1 100%;
  margin-bottom:1px;
}
.service {
  width: 24.8%;
  height: 45%;
  background: #262626;
}

＆＃13;

<div id="servicesGrid">
  <div id="serviceWide" class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
  <div class="service col"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

#servicesGrid
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.service
{
	 width:calc(24.75% - 1px);
	height:45%;
	background:#262626;
	display:block;
	float:left;
	margin:1px;
}

#servicesGrid .service:nth-of-type(2)
{
	margin-left:0;
}

#servicesGrid .service:nth-of-type(5)
{
	margin-right:0;
}

<div id="servicesGrid">
  <div id="serviceWide" class="service col" style="width:100%; margin:0 0 1px 0"></div>
<div class="service col"></div>
<div class="service col"></div>
<div class="service col"></div>
<div class="service col"></div>
</div>

Answer 5

由于你想使用固定的1px页边距，你应该计算你的宽度（设置页边距的方式，你很难设置动态宽度而没有一个小例外 - 除非你想使用<table>）

这样，我建议您在列上使用width: calc(25% - Ypx)。在整个浏览器（http://caniuse.com/#search=calc）上受支持。这解决了这个问题：

.service
{
    width:calc(25% - 2px);
    height:45%;
    background:#262626;
    display:block;
    float:left;
    margin: 1px;
}

#servicesGrid .service:nth-of-type(2)
{
    margin-left:0;
    width:calc(25% - 1px);
}

#servicesGrid .service:nth-of-type(5)
{
    margin-right:0;
    width:calc(25% - 1px);
}