lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot lttitleDIV内容横向排列lttitle ltstyle type=quottextcssquot container width 500pxmargin 50px autooverflow hiddenborder 1px soli。

1用Dreamweaver新建一个HTML文件 2修改title为html+css实现横向导航 3新建一个div id为“a”，添加ul li标签 4在li中添加自己想要的文字 并调整好文字间距，按F12预览，如下图所示 5首先去掉字体前面的小黑点。

1首先，如图所示，我在html中放置了两个iframe标签，没有额外的设置如果浏览器直接打开，您可以看到iframe标签默认是水平排列的2如果我将这两个iframe标签放在div标签中，我可以看到div标签默认垂直排列，也就是说，di。

两个点位横向排列给每个div设置floatleft，即可说祝福到，和元素脱离文档流，即可实现块元素也可以同行排列。

然后对div添加上浮动标签floatleft这时候图片就发生变化了，竖排变成横排了，因为浮动的原因，最外面的边框仅剩一条线了，如图 需要将其浮动清除对下面的影响，在父级boss中添加个overflowhidden就可以了然后在每个图片。

ltdiv 2如果只是两个DIV没有那两个引号， 可以在CSS里增加float参数， 如222里加上 floatleft 333里加上 flatright222 float leftheight 30pxwidth 80px 333 float rightheight 30pxwi。

只要你不在超出最外层宽度的基础上，设置floatleft或者floatrigght都可以实现多个DIV横放。

两个DIV横向排列方法二这里使用floatright属性float做为CSS中的一个属性定义元素向哪个方向浮动floatright文本或图像会移至父元素中的右侧注意有写情况float属性必须配合width使用，否则失效height24px和line。

1把两个div设置成行内元素，行内元素自然的会成为一行displayinlineblock2可以设置浮动，float但父元素要清浮动3弹性布局，父元素设置displayflexflexdirectionrow暂提供三个方案，或者还有更好的方法我。

1浮动布局ltstylehtml，bodymargin0 padding0div1 floatleft width80% height600px backgroundcolorreddiv2 floatleft width80% backgroundcolorgreendiv3 floatright width。

1新建html文档2书写hmtl代码 lt！ 横向排列 ， ltdiv id=quotnavquot，ltdiv id=quotbox1quot1ltdiv，ltdiv id=quotbox2quot2ltdiv，ltdiv id=quotbox3quot3ltdiv，ltdiv3初始化css代码ltstyle。

把这一句 style=quotwidth2000pxquot去掉，当它所在的div里面的内容增多的时候，就自然有横向滚动条了可以多复制几个class=“glist”的整个div试试看例如ltdiv id=quotteamLeftquot class=quotf_lquot ltdiv class=quotglistquot。

当然 DIV支持的所有样式 表格同样的都支持，表格的缺点虽然多，但是还有有DIV无法取代的，比如企图让DIV里的内容垂直居中，那就麻烦了，表格责直接一个Valignmiddle搞定比如几个DIV之间宽度自适应的问题，跟100%DIV布局。

因为“textaligncenter”控制的是文本居中，div居中可以用外边距margin来实现1新建html文件，在body标签中添加div标签，div标签中的内容为“演示文本”，添加题目中的css样式，为了方便演示，给div标签添加灰色背景，这时。

在这种布局中，div承载的是内容，而CSS承载的是样式5行5列具体制作方法推荐通过千锋教育进行学习，千锋教育开发教学课程，满足工科建设人才培养计划，切合主流企业对IT互联网实用型人才需求，累计更新74个版本 DIV 全称。