Question

我希望有三个相同大小的列，它们之间有相同的间隙。因此，对于最右边的列，右侧应该没有填充或边距，并且左列左边没有边距/填充。但是中柱的两侧会有相同的间隙。

html

<div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

.col {
    float: left;
    width: 33.33%;
    height: 300px;
    background-color: red;
}

Answer 1

考虑使用基于网格的css框架（bootstrap，foundation，960gs或任何其他）。他们真的很容易创建相等宽度的列。以下是bootstrap版本3的示例：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container"><div class="row">
  <div class="col-xs-4">First column</div>
  <div class="col-xs-4">Second column</div>
  <div class="col-xs-4">Third column</div>
</div></div>

编辑：这是bootstrap的工作方式。它非常简单，实际上代码不多：

* { box-sizing:border-box; }

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-4 {
  float: left;
  width: 33.33333333%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

这里重要的是border-sizing:border-box;属性，它确保填充在指定的宽度内。如果没有它，则使用content-box的默认框模型值，它将填充添加到宽度（实际上使元素比指定的更宽）。

Answer 2

有很多方法可以做到这一点。

DEMO：http://jsbin.com/qocaxo/1

<强> CSS

html,
body {
    margin: 0;
    padding: 0;
    font: 100%/220% sans-serif; /* demo */
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.col {
    text-align:center;/* demo */
    font-size:200%;/* demo */
    background-color: red;/* demo */
    box-sizing:border-box;
    padding:20px;
    margin-bottom:3%;
}

/* the larger viewport css */

@media (min-width:768px) { 
    .col {
        float: left;
        width: 31.33333%;
        height: 300px;
        margin: 0 1%;
    }
    .row {
        margin-left: -1%;
        margin-right: -1%;
    }
    .wrapper {
        overflow-x: hidden
    }
}

<强> HTML

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>  
</div>

Answer 3

您可以使用此公式计算百分比

(your width of element, or padding, or margin) / (total width of container) * 100 = %

使用此page作为参考。

DEMO

.container {
    width: 300px;
    background-color: aqua;
}
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}
.col {
    float: left;
    width: 30%;
    height: 300px;
    background-color: red;
}
.col.middle {
    margin: 0 5%;
}


<div class="container clearfix">
    <div class="col"></div>
    <div class="col middle"></div>
    <div class="col"></div>
</div>

css中有3个相等且均匀分布的列

3 个答案:

DEMO：http://jsbin.com/qocaxo/1