css中布局方式总结

最新推荐文章于 2025-04-26 15:00:00 发布

原创最新推荐文章于 2025-04-26 15:00:00 发布 · 816 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #css3

Web前端专栏收录该内容

11 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

问题

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

方案一

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>