css中布局方式总结

最新推荐文章于 2023-08-17 18:03:00 发布

gglinux

最新推荐文章于 2023-08-17 18:03:00 发布

阅读量764

点赞数

分类专栏： Web前端文章标签： html5 css css3

本文链接：https://blog.csdn.net/gglinux/article/details/44917947

版权

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

问题

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

方案一

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

gglinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中布局方式总结

问题要实现如下的布局。有几种方案可以选择？方案一css中前”世纪”的布局方式-table，这种布局方式不利于SEO，代码量比较大。<style type="text/css"> .content{width: 960px;margin: auto;} .content-list{width: 300px;background-color: #4598BF;height: 300p
复制链接

扫一扫

专栏目录