多列

<!doctype html>
  <html>
  <head>
  <title>Insert a title</title>
  <meta charset="utf-8">
  <style>

<style>

#d1{

   border:1px;  solid#000;

   width:500px;

   column-count:3;

/*栏目列数*/

column-gap:20px;

每列之间的间隔：20px;

column-rule：2px    solid:#foo;

-webkit-column-count:3;

-webkit-column-gap:20px;

-webkit-column-rule:2px solid=#f00;

}

</style>
  </head>
  <body>
  <div id="d1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum provident corporis eum cumque unde illum molestias deleniti expedita distinctio! Aperiam mollitia omnis eligendi eum expedita id sint adipisci nostrum deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi itaque sit ducimus ut cupiditate rem totam blanditiis repellat quisquam nihil? Sapiente eius quidem illo nisi totam quia atque. Nam nihil?
  </div>
  </body>
  </html>

posted on 2017-04-04 21:38  zhangailing  阅读(160)  评论(0)  编辑  收藏  举报

导航