3列,边距相等

时间:2016-04-04 08:13:17

标签: html css

https://jsfiddle.net/zfacazy0/

.row {
  width:200px;
  background:blue;
  display:block;
  overflow:hidden;
}

.col{
  width:30%;
  margin-right:5px;
  background:red;
  float:left;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>

如果我把33%并且保证金太多则不会有单行。要么我调整边距或宽度,我就是不能做一个具有相同边距和宽度的正确3列。需要帮助。

3 个答案:

答案 0 :(得分:2)

检查一下。您可以使用gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glEnable(GL10.GL_TEXTURE_2D); gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); gl.glEnable(GL10.GL_DEPTH_TEST); gl.glEnable(GL10.GL_ALPHA_TEST); gl.glEnable(GL10.GL_BLEND); gl.glEnableClientState(GL10.GL_COLOR_ARRAY); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA); gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBufferLT44); gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texBufferLT1); // opaque objects rendered first: drawOpaqueObjs(gl, rotationSpeed, myFusedOrientation); drawTransparentObjs(gl, rotationSpeed, myFusedOrientation); 属性从第一个元素中删除边距。

first-child
.row {
  width: 200px;
  background: blue;
  display: block;
  overflow: hidden;
}
.col {
  width: 30%;
  margin-left: 5%;
  background: red;
  float: left;
}
.col:first-child {
  margin-left: 0px;
}

答案 1 :(得分:1)

Just display:flex可以解决问题:

.row {
  width:200px;
  background:blue;
  display:flex;
  overflow:hidden;
}

.col{
  width:33%;
  margin-right:5px;
  background:red;
}
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col" style="margin-right:0">3</div>
</div>

答案 2 :(得分:0)

[Authorize(Roles="admin")]
    .row {
        width: 200px;
        background: blue;
        display: flex;
        overflow: hidden;
    }
    .col {
        width: 33.33%;
        margin-right: 5px;
        background: red;
        float: left;
    }