开发者社区 问答 正文

用css实现分栏布局

screenshot
兼容到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%; */
}

screenshot

展开
收起
杨冬芳 2016-06-03 09:18:03 1709 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • IT从业

    在@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;
    }
    2019-07-17 19:25:52 举报
    赞同 评论

    评论

    全部评论 (0)

    登录后可评论
问答分类:
问答地址:
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等