如何将1170像素网格拆分为8个框？

Question

我需要将一个1170网格分成8个X个方框，每个方框的左右两边都有相同数量的填充。我似乎无法做到正确：（

我设法134 x 8 pixels，然后每个14都有一个但是没有用，但因为那时第一个和最后一个框不会有相同的填充。

Answer 1

您可以尝试calc

padding: 7px;
width: calc(12.5% - 14px);

有关W3Schools.com的Calc的更多信息

Answer 2

如果你能够使用flexbox，你可以只用几行来获得均匀间距，而不是手工计算。我为flexbox找到的最佳资源是https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  width: 1170px;
  display: flex;
  justify-content: space-between;
}

.item {
  border: 2px solid red;
  width: 50px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

如评论所述，flex使其变得简单。

+选择器有助于直观地管理padding

.flex {
  display:flex;/* block level */
  width:1170px;/* any values here or none */
  height:100px;/* whatever: demo purpse*/
  margin:auto;
  background:lightgray;/* whatever: demo purpse*/
}
.flex div {
  flex:1;/* sprays child evenly to fill whole space*/
  padding:1em;
  background:gray;
  background-clip:content-box;/*show box minus padding area */
}
.flex div + div {/* make padding visually even */
  padding-left:0;
}

div div {
  display:flex;
  align-items:center;
  justify-content/* it's not text-align*/:center;
  }
/* not just sure if that would be fine ? */
.flex:hover div {
  padding:21px;
  box-shadow:0 0 0 1px white
  }

<div class=flex>
  <div>average 128px each</div>
  <div>width for content</div>
  <div>is less or more</div>
  <div>according to font-size</div>
  <div>padding is 1em</div>
  <div>but could be</div>
  <div>static units</div>
  <div>such as pixels</div>
</div

您不想使用flex，因为您（不幸的是）运行IE8？ display:table + table-layout:fixed将为您完成工作

.flex {
  display: table;
  /* block level */
  table-layout: fixed;
  /* sprays child evenly if no width is specified*/
  width: 1170px;
  /* any values here or none */
  height: 100px;
  /* whatever: demo purpse*/
  margin: auto;
  background: lightgray;
  /* whatever: demo purpse*/
}
.flex div {
  display: table-cell;
  padding: 1em;
  background: gray;
  background-clip: content-box;
  /*show box minus padding area */
}
.flex div + div {
  /* make padding visually even */
  padding-left: 0;
}
div div {
  vertical-align:middle;
 text-align : center;
}
/* not just sure if that would be fine ? */

.flex:hover div {
  padding: 21px;
  box-shadow: 0 0 0 1px white
}

<div class=flex>
  <div>average 128px each</div>
  <div>width for content</div>
  <div>is less or more</div>
  <div>according to font-size</div>
  <div>padding is 1em</div>
  <div>but could be</div>
  <div>static units</div>
  <div>such as pixels</div>
  </div

Answer 4

出于某种原因，我的jsFiddle在这里不起作用，但我在这里有八个专栏：http://codepen.io/anon/pen/zoyEme

制作两个半列，然后在每个列中放入四列，总共八列。

代码：

＆＃13;

＆＃13;

.container,
.row,
.col-lg-6 {
    padding-left: 0;
    padding-right: 0;
}

div {border: 1px dotted red;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                    <div class="col-lg-3">
                        ONE
                    </div>
                </div>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;