css中布局方式总结

来源：互联网发布：三菱梯形图编程入门编辑：程序博客网时间：2024/05/17 09:45

问题

要实现如下的布局。有几种方案可以选择呢？
这里写图片描述

方案一

css中前”世纪”的布局方式-table，这种布局方式不利于SEO，代码量比较大。

<style type="text/css">    .content{width: 960px;margin: auto;}    .content-list{width: 300px;background-color: #4598BF;height: 300px;vertical-align: top;}    .content-pad{width: 30px;background-color: #7ACE2D;height: 300px;}    .middle-pad{width: 100%;height: 20px;}</style><body><table class="content">    <tr>        <td class="content-list">1</td>        <td class="content-pad"></td>        <td class="content-list">2</td>        <td class="content-pad"></td>        <td class="content-list">3</td>    </tr>    <tr class="middle-pad"></tr>    <tr>        <td class="content-list">4</td>        <td class="content-pad"></td>        <td class="content-list">5</td>        <td class="content-pad"></td>        <td class="content-list">6</td>    </tr></table>

这里写图片描述

方案二

css中经典布局div+float，使用float后。会使该标签脱离文档流（不按照正常的显示方式显示），后果就是父元素不能自适应高度。需要清楚子元素浮动.

ul{list-style:none;}ul li{float: left;}.content{width: 960px;margin: auto;}.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}.clearfix:after{content: ".";clear: both;height: 0;visibility: hidden;display: block;}/*.clearfix{overflow: hidden;}*//*.clearfix{clear: both;}*/</style><body>    <ul class="content clearfix">        <li>1</li>        <li>2</li>        <li>3</li>    </ul>    <ul class="content clearfix">        <li>4</li>        <li>5</li>        <li>6</li>    </ul></body>

这里写图片描述

方案三

使用inline-block，行内块布局。会造成元素间距，具体的解决方案
去除inline-block元素间间距的N种方法

<style type="text/css">/*ul li{margin: 0px;padding: 0px;}*//* * {margin: 0px;padding: 0px;}*/ul li{display: inline-block;}.content{width: 960px;margin: auto;}.content li{width: 300px;margin-left: 20px;background-color: #7ACE2D;margin-bottom: 30px;height: 300px;}</style><body>    <ul class="content">        <li>1        <li>2        <li>3</li>    </ul></body>

这里写图片描述

方案四

使用css3中的盒布局，盒布局能解决使用float或者position属性时左右两栏或多栏不能对其的问题。

<body><style type="text/css">ul{list-style:none;}.content{display: -moz-box;display: -webkit-box;width: 960px;margin: auto;}.content li{width: 300px;margin-left: 20px; }.content li:nth-child(1){background-color: #7ACE2D;}.content li:nth-child(2){background-color: #4559BF;}.content li:nth-child(3){background-color: #D62B5F;}</style><ul class="content">    <li>gglinux,gglinux,gglinux        gglinux,gglinux,gglinux        gglinux,gglinux,gglinux        gglinux,gglinux,gglinux</li>    <li>2</li>    <li>3</li></ul></body>

这里写图片描述

就这样吧，css3中还有两种布局方式。
多栏布局：可以将一个元素中的内容分成多栏显示，并且确保各栏中的内容底部对齐。
弹性盒布局：可以保证容器的高度和宽度与浏览器的自适应性。

0 0