用css实现分栏布局

Question

目前状态

希望达到左边顶左边 右边顶右边 类似于flexbox space-between效果

兼容到ie8

html

<div class="con">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

css

.con {
  font-size: 0;
}

.box{
  width: 30%;
  display: inline-block;
  border:1px solid #440239;
  height: 50px;  
  font-size: 14px;
  /* margin: 1%; */
}

codepen.io地址

Answer 1

在@MockingBird 基础上修改的响应式？：

<div class="con">
  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>

  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>

  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>
</div>

.con {
  font-size: 0;
  max-width: 960px;
  margin: 0 auto;
}

.box{
  display: block;
  border: 1px solid #000;
  height: 50px;  
  font-size: 14px;
  /* margin: 1%; */
}

.fleft {
  float: left;
  width: 20%;
  border-color: blue;
}
.fright {
  float: right;
  width: 20%;
  border-color: red;
}
.center {
  margin: 0 35%;
  width: auto;
}

Answer 2

用表格布局吧，或者找能shiv你需要的属性的htc文件

Answer 3

左右两栏固定宽， 中间宽度自适应 ？
DEMO：http://codepen.io/anon/pen/xGjGPg

Answer 4

感觉你在自己实现一个grid。这里假定只有一行的情况。一个grid里，每一行都要用单独的div包裹起来。比如这里的.con。

<div class="con">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>



.con {
  font-size: 0;
}

.box{
  width: 30%;
  box-sizing: border-box;
  display: inline-block;
  border:1px solid #440239;
  height: 50px;  
  font-size: 14px;
  /* margin: 1%; */
}

.box + .box {
  margin-left: 5%;
}

Answer 5

三栏的话，最左边float: left
最右边 float: right 就行了

Answer 6

可以都设成左浮动，然后设定一个宽度

Answer 7

乍一看，我还以为是我之前提的问题呢，连图片和使用flex布局都一样，这是链接http://segmentfault.com/q/1010000002799001

Answer 8

.con {
text-align:justify;
font-size:0px;
}
.con:after {
content:'';
display: inline-block;
width: 100%;
height: 0px;
}
.con .box {
display: inline-block;
margin-top:6px;
font-size: 12px;
width: 30%;
height: 16px;
background-color: red;
}