一、使用display的inline属性
<div style="width:300px; height:auto; float:left; display:inline">AAAA</div> <div style="width:300px; height:auto; float:left; display:inline">BBBB</div>
二、通过设置float来让Div并排显示
<style> #left,#right {float:left;border:1px solid red; padding:10px;} </style> <div id= "main "> <div id= "left "> 1111 </div> <div id= "right "> 2222 <br> 2222 <br> 2222 </div> <!-- 如果不用clear屬性可能會出現瀏覽器不兼容問題,clear設這元素周圍沒有浮動元素 --> <div style="clear:both"></div> </div>
三、对于两个div并排,左边为绝对宽度,右边为相对宽度的,需要用到这种布局的情况比较多见,如左边为导航,右边为内容的页面
1、将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后right的一块width为百分百
2、 使用position:absolute。代码如下。
<style> body{ margin:0; height:100%} html{ height:100%} /*兼容firefox的div高度100%*/ #left{ position:absolute; top:0; left:0; width:200px; height:100%; background-color:#CCCCCC} #right{ margin-left:200px; height:100%; background-color:#0099FF} </style> <div id="left">left</div> <div id="right">right</div>
这段代码主要涉及到以下两点点比较重要的:
(1)兼容firefox实现div高度100%;
(2)div绝对定位的妙用;在页面布局的时候,position:absolute如果灵活的应用,可以达到很好的效果。
3、 使用float解决div左右布局,左为绝对宽度,右为相对宽度问题
<style type="text/css"> body{ margin:0; height:100% } html{ height:100% } #left{ width:150px; height:100%; float:left; _margin-right:-3px; background-color: yellow } #main{ height:100%; background-color: green } </style> <div id="left"></div> <div id="main"></div>
4、代码如下。方法3可能没有按照题目要求,但是可以达到一样的页面效果。主要是使用了div的float属性。
<style> body{ margin:0; height:100%} html{ height:100%} /*兼容firefox的div高度100%*/ #left{ width:200px; height:100%; background-color:#CCCCCC; float:left} #main{ width:100%; height:100%; background-color:#0099FF} </style> <div id="main"> <div id="left">left</div> Right </div>
相关推荐
让两个Div并排显示的方法有很多,使用display的inline属性、通过设置float来让Div并排显示都可以实现,感兴趣的朋友可以参考下本
两个div并排的实现代码,一般在使用过程中,最好外面再包括一个用来定位居中显示。这里主要是了解下css的左右浮动布局给开始学习css的朋友。
两个div并排一行情况也是很常见的,下面有个示例可以实现,大家可以参考下
一、使用css float并排显示 二、使用css display同行显示 我们加入display:inline即可解决实现同行并排显示div盒子对象。对同行所有div标签设置div{ display:inline}样式
Dreamweaver中div标签怎么设置左右并排?Dreamweaver中div标签默认是上下并排的,想要设置成左右并排,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下
主要介绍了两个div在同一行,两个div不换行的两种实现方法,有不知道的朋友可以参考下
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位 如果想为元素设置层模型中的绝对定位,需要设置position:...
这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 **margin:auto;**...
提示要注意两点:1、DIV宽高的定义。2、DIV在 IE6 中默认是有高度的。 上图右边是我们要实现的效果,代码如下: 复制代码代码如下:<div id=”box”></div> <p><style type=”text/css”>#box{width:0px; ...
对于前边一个复选框,后边一句文字这样的排布,经常见,但问题总是很多,如何让它们两个并排对齐,有时候就是几个像素的问题,但各个浏览器就是不一样,特别是ie6. 今天忽然发现了解决这类问题的办法。 一般的写法...
一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的话,两个浏览器下会有区别,具体有一个会产生间隙。兼容做法就是都设置float属性。但是记住有...
下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格...
html常用方法,你会不会把两个div并排排列,而且右边的div宽度随左边的宽度变化而自动调整,不会就看看吧
demo包括: 1、多个div并排,宽度自适应100% - 左右两侧div宽度固定,中间DIV占满剩余区域 ; 2、多个div,高度自适应100% - 页面布局:头,身体,脚,占满整个屏幕;
红色区域是Box1的范围Box-2占据了Box-1的位置,但是文字会环绕Box-1第一个div脱离标准流,向左浮动,直至碰到其父元素边缘第一个盒子向左浮动1浮动红框是Box-1,蓝框是Box-2,绿框是Box-3。Box-1和Box-2盖在Box-3的...
并排使用两张地图,或在模板的默认版本中,在基本地图上显示两组图块。 Slider 适用于 Chrome、Safari、Firefox 和 IE,并且具有响应性和移动友好性。 查看的已发布项目。 它使用什么 展示地图的 作为一个移动友好...
立体视这是一个Python脚本/库,用于将两个图像转换为立体3D图像:浮雕,并排(交叉和平行),上方/下方,摆动GIF,交错和棋盘格。要求Python 3.4以上或Python 2.7以上枕头cv2(自动对齐可选) numpy(自动对齐可选)...