css实现左右布局

　　css实现左右布局显示是前端进行页面设计的基础，也是全面了解并学习css一个很好的切入点，因为其中会涉及到对许多css基础点的认知。实现css入门，理解左右布局的实现方式是必经之路，同时也能使我们在项目中涉及前端编码的部分受益。　

　　下面我们就介绍自己总结的7种css实现前端左右布局的方式，如还有其他方式，请告诉我。

1. table---table的li实现

实现原理：

　　table标签是能够具有实现左右布局的属性，也是我们项目中使用最多的。table布局也是页面布局中使用的最早的布局方式，随着前端技术的发展，table布局由于自身的局限性逐渐被div布局取代。

查看代码（主要代码）：

<table class="sTable">
    <tr>
        <td class="col-4 c1">1</td>
        <td class="col-4 c2">2</td>
        <td class="col-4 c3">3</td>
        <td class="col-4 c4">4</td>
    </tr>
    <tr>
        <td class="col-4 c5" colspan="2">5</td>
        <td class="col-4 c6" colspan="2">6</td>
    </tr>
    <tr>
        <td class="col-4 c2">7</td>
        <td class="col-4 c3">8</td>
    </tr>
    <tr>
        <td class="col-4 c2" rowspan="2">9</td>
        <td class="col-4 c3">9</td>
    </tr>
    <tr >
        <td class="col-4 c4">10</td>
        <td class="col-4 c3">8</td>
    </tr>
    <tr >
        <td class="col-4 c4">10</td>
        <td class="col-4 c3">8</td>
    </tr>
</table>

代码说明：

tr表示一行，td表示一列，先实现行再实现列，所以tr中可以添加td实现盒子的左右布局。另:由于table布局由于性能问题已经逐渐被放弃使用，所以提供了table的li标签实现，供参考。

2. inline-block

实现原理：

display:inline-block属性是介于行级元素(display:inline)和块级元素(display：block)之间的属性，它可以像行级元素一样水平布局，也可以像块级元素设置宽高属性，所以使用它可以进行左右布局。另：它不支持ie6、7浏览器，请注意，但是可以使用inline进行hack处理。

查看代码：

html:
<section class="section">
    <div class="wrap">
        <div class="col-4 c1">1</div>
        <div class="col-4 c2">2</div>
        <div class="col-4 c3">3</div>
        <div class="col-4 c4">4</div>
        <div class="col-4 c5">5</div>
        <div class="col-4 c6">6</div>
    </div>
</section>
css:
.col-4{
    display: inline-block;
    *display: inline;
    *zoom:1; //ie6、7hack
    width:25%;
    height:30px;
    border:1px solid #999;
    font-size: 14px;
}
.wrap{
    margin:10px auto;
    max-width:1280px;
    min-width:1024px;
    font-size: 0px;
}

代码说明：

无

3. float实现左右布局

实现原理：

float属性是css中关于布局的一个关键属性，其意为将该块状区域脱离父级标签的文档流，left属性值使该区域向父级标签区域的左侧边界放置，right属性值使该区域块向父级标签的右侧边界放置，如是利用该属性可以实现左右布局。 float属性属于布局属性，其中有着很多重要应用。

float属性的三个特性为：

  • a、包裹性：可以按照区域块中子元素的实际宽度进行包裹；
  • b、破坏性：float区域块不会被父级区域块包裹，造成前端常见的高度塌陷问题，解决办法是清除浮动；
  • c、占位性（个人称呼），浮动区域块虽然是脱离了父级区域，但是它是要占用一定的正常流区域的，即如果不清除浮动，我们会看到它会占用它后面的同级元素（如果没有会占用它父级后面的同级元素，如果还是没有则向上追溯）的区域，影响同级元素，所以常见清浮动。
  • 以上三特性为进阶部分，刚兴趣的同学可以课后研究。

查看代码：

<section class="section">
    <div class="wrap">
        <div class="col-4 c1">1</div>
        <div class="col-4 c2">2</div>
        <div class="col-4 c3">3</div>
        <div class="col-4 c4">4</div>
        <div class="col-4 c5">5</div>
        <div class="col-4 c6">6</div>
        <div class="clear">dgdgdg</div>
    </div>
</section>

.col-4{
    float:left;
    width:25%;
    height:30px;
    border:1px solid #999;
    box-sizing:border-box;/*盒子模型*/
}
.wrap{
    margin:10px auto;
    max-width:1280px;
    min-width:1024px;
}

代码说明：

float布局部分和inline-block布局部分比较相似，但是其中最主要的区别是：将

.c1{height:60px}

以后就会发现float布局对于后面节点的布局采用交错式的布局，inline-block采用正常式的布局。（个人称呼，理解即可，不用在乎怎么称呼）

4. 基于css3中flexbox属性实现左右布局

实现原理：

css3中出现了弹性盒子布局，即display:box;该种布局主要用于移动前端开发，因为该属性不支持ie6、7、8，支持chrome，firefox，ie9+，同时在移动端，主要是ios和Android中基于webkit内核的浏览器都是支持的，所以也是一种好的布局方式。

查看代码：

<section class="section">
    <div class="wrap">
        <div class="col-4 c1">1</div>
        <div class="col-4 c2">2</div>
        <div class="col-4 c3">3</div>
        <div class="col-4 c4">4</div>
    </div>
    <div class="wrap">
        <div class="col-4 c5">5</div>
        <div class="col-4 c6">6</div>
    </div>
</section>
.wrap{
    margin:10px auto;
    max-width:1280px;
    min-width:1024px;
}
.wrap{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}
.col-4{
    height:30px;
    border:1px solid #999;
    -webkit-box-flex:1;
}

代码说明：

在父元素中定义display：-webkit-box;在想要布局的部分定义box-flex设置宽度，实现区域的左右布局，具体请参见css手册

5. float+margin实现左右布局

实现原理：

该部分以及向下主要说明两栏的左右布局的实现。 float能够使得元素向左或者向右靠边布局，如果在同级元素中设置一个正常流的区域与浮动块并列，则浮动块会在该正常流同级区域的边界处，只是浮动块会影响该区域块的布局，所以要清除浮动块的影响，所以此时将正常流区域块的盒子设置margin等于浮动块的宽度既可以清除影响。

新浪微博采用如此方式：

补充：由margin→盒模型： css盒模型是css的基础一环，css盒子从内到外一次有内容-padding-border-margin组成，可以通过设置各个值来设置间距。 另：对于不同的文档模式其宽度和高度解析不同，

  • 对于ie下怪异文档模式或者标准文档模式下定义了css3中的box-sizing：border-box的元素，css中设置的宽高都是内容区宽高+padding+border的；
  • 标准文档下或者定义了css3中box-sizing:content-box的元素，css中定义的元素宽高就是内容区的宽高。

查看代码：

<header class="header">
    <div class="wrap">
        <div class="hLeft">left</div>
        <div class="hRight">right</div>
    </div>
</header>
.header{
        background-color: #ccc;
        padding:1px;
    }
    .wrap{
        margin:10px auto;
        max-width:1280px;
        min-width:1024px;
    }
    .hLeft{
        float:left;
        border:1px solid #999;
        width:15%;
        height: 50px;
    }
    .hRight{
        /*overflow: hidden;
        zoom:1;*/
        height:50px;
        border:1px solid #999;
        margin-left:15%;
    }
    .box{
        height: 30px;
        background-color: red
    }

代码说明：

其中margin-left:15%;去除了浮动对同级元素产生的影响。

6. block formate context(float+overflow)实现左右布局

实现原理：

对于float对后面同级元素的影响，除了采用margin进行影响的清除，还可以在受影响的元素上添加overflow：hidden来清除浮动对该区域块带来的影响。具体原理是块级格式化上下文（BFC）的应用。 关于bfc的进阶了解，可以参见文章。

查看代码：

<header class="header">
    <div class="wrap">
        <div class="hLeft">left</div>
        <div class="hRight">right</div>
        <!-- <div>hhh<br>hhh<br>jjj<br>sss</div> -->
    </div>
</header>
 .header{
        background-color: #ccc;
        padding:1px;
    }
    .wrap{
        margin:10px auto;
        max-width:1280px;
        min-width:1024px;
    }
    .hLeft{
        float:left;
        border:1px solid #999;
        width:15%;
        height: 90px
    }
    .hRight{
        overflow: hidden;
        zoom:1;
        height:50px;
        border:1px solid #999;
    }
    .box{
        margin:10px;
        border:1px solid #888;
    }
    .cbox{
        height:20px;
        background-color: #ccc;
        margin:25px;
        float:left;
        width:100%;
    }
    .clear{
        clear:both;
    }

代码说明：

关键所在：.hRight{overflow: hidden;},作用在受影响的区域块。

7. position:absolute左右布局

实现原理：

除了float可以产生脱离文档流的布局现象以外，position：absolute也可以，但是二者又有不同之处。不同之处在于absolute可以覆盖任何位置的元素且不会影响正常流的布局，但是会产生遮盖，所以要求正常流要躲避绝对布局的遮挡。躲避方式可以使用margin。

查看代码：

<header class="header">
    <div class="wrap">
        <div class="hLeft">left</div>
        <div class="hRight">right</div>
    </div>
</header>
.header{
        background-color: #ccc;
        padding:1px;
    }
    .wrap{
        margin:10px auto;
        max-width:1280px;
        min-width:1024px;
        position: relative;
    }
    .hLeft{
        position: absolute;
        left:0;
        top:0;
        width:15%;
        height: 50px;
        border:1px solid #999;
    }
    .hRight{
        height:50px;
        border:1px solid #999;
        margin-left:15%;
    }
    .box{
        height: 30px;
        background-color: red
    }

代码说明：

左侧部分采用绝对布局，右侧正常流，但是使用margin躲避遮挡。

结束语

css属性可以大致分类为布局属性和效果属性（个人理解），布局属性主要有display;inline|block|inline-block、float:left|right|none、position:absolute|fixed|relative，各个不同属性对应的属性值对应了各种布局方式的实现；效果属性主要是color、background、border等等，主要修改外观，不影响布局。css入门时主要是先把布局属性理解并应用即可完成入门。



来自为知笔记(Wiz)


附件列表

				


				
时间： 2024-10-12 20:21:49 

		


		


	

	
	

		


		
css实现左右布局的相关文章


						

		

			

                CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
			

		

		

									

				新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志. 按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作.然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了. 主流的浏览			

		

	

				

		

			

                左边logo 右边广告图片布局 div css左右浮动布局实例
			

		

		

									

				左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左			

		

	

				

		

			

                PHP.4-DIV+CSS标准网页布局准备工作（下）
			

		

		

									

				DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百分比值参考上级元素的宽度,允许使用负值边际.如果四个值都给出了,它们分别被应用于上.右.下和左边界.如果只给出一个值,它被应用于所有边界.如果两个或三个值给出了,省略了的值与对边相等.注意如果边界在垂直方向邻接(重叠)了,会改用其中最大的那个边界值.而水平方向则不会.也可以选择使用上边界margin			

		

	

				

		

			

                DIV+CSS列表式布局（同意图片的应用）
			

		

		

									

				1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!--gbk,gb2312 中文-->			

		

	

				

		

			

                React-Native入门指南(三) ——CSS和UI布局
			

		

		

									

				React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下: 第1篇hello react-native 第2篇认识代码结构 第3篇css和布局 第4篇学会react-native布局 第5篇ui组件 还有几篇需要这这周完成(这块会时刻更新): 第6篇JSX语法 第7			

		

	

				

		

			

                PHP.3-DIV+CSS标准网页布局准备工作（上）
			

		

		

									

				DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位.通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置.大小.边框.内外边距.排列方式等.简单地说,div用于搭建网站结构(框架).css用于创建网站表现(样式/美化).该标准简化了HTML页面代码,获			

		

	

						

		

			

                Css三栏布局自适应实现几种方法
			

		

		

									

				Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏布局自适应: 代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>绝对定位法</title> <style>  .pa			

		

	

				

		

			

                css两列布局，一边固定宽度，另一边自适应
			

		

		

									

				<!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" />        <title>css两列布局,一边固定宽度,另一边自适应</title>    </head>    <style>        a, body, center, cite, code, dd, del, div, dl, dt, e			

		

	

				

		

			

                div css三列布局效果实例代码
			

		

		

									

				div css三列布局效果实例代码:三列布局在是比较中规中矩的布局之一,大量的网站都有应用,也是初学者必须要掌握的布局方式之一,下面就是一个三列布局的实例代码,仅供参考之用,希望对初学者有一定的帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <