让两个DIV并排显示_html/css_WEB-ITnose
程序员文章站
2022-04-23 20:45:18
...
一、使用display的inline属性
Html代码
-
AAAA
-
BBBB
1AAAA2BBBB
二、通过设置float来让Div并排显示
Html代码
- #left,#right {float:left;border:1px solid red; padding:10px;}
-
11112222
2222
2222
1 451111622227 8 9
2222
2222
三、对于两个div并排,左边为绝对宽度,右边为相对宽度的,需要用到这种布局的情况比较多见,如左边为导航,右边为内容的页面
1、将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后right的一块width为百分百
2、 使用position:absolute。代码如下。
Html代码
- body{ margin:0; height:100%}
- html{ height:100%} /*兼容firefox的div高度100%*/
- #left{ position:absolute; top:0; left:0; width:200px; height:100%;
- #right{ margin-left:200px; height:100%;
-
left
-
right
这段代码主要涉及到以下两点点比较重要的:
(1)兼容firefox实现div高度100%;
(2)div绝对定位的妙用;在页面布局的时候,position:absolute如果灵活的应用,可以达到很好的效果。
3、 使用float解决div左右布局,左为绝对宽度,右为相对宽度问题
Html代码
- body{ margin:0; height:100% }
- html{ height:100% }
- #left{ width:150px; height:100%; float:left; _margin-right:-3px; yellow }
- #main{ height:100%; green }
4、代码如下。方法3可能没有按照题目要求,但是可以达到一样的页面效果。主要是使用了div的float属性。
Html代码
- body{ margin:0; height:100%}
- html{ height:100%} /*兼容firefox的div高度100%*/
- #left{ width:200px; height:100%; float:left}
- #main{ width:100%; height:100%;
-
left
- Right
上一篇: 通过JS获取JSON数据并加载的步骤详解
下一篇: node.js实现web终端操作多用户
推荐阅读
-
以下代码如何让DIV先隐藏_html/css_WEB-ITnose
-
关于两个div高度保持一致的(css+js)两种解决办法_html/css_WEB-ITnose
-
为什么div里明明放着很多东西,但是dreamweaver里这个div就是显示一条直线_html/css_WEB-ITnose
-
写一个表格,如何让他显示10秒后自动哦你消失_html/css_WEB-ITnose
-
怎样控制DIV的线条显示效果?_html/css_WEB-ITnose
-
Div在浏览器中居中显示_html/css_WEB-ITnose
-
如何让Div始终保持水平居中或者垂直居中_html/css_WEB-ITnose
-
用一个Div显示大段文本需要做那些设置?_html/css_WEB-ITnose
-
如何让两个div在同一行显示?一个float搞定
-
2个div层 显示顺序问题_html/css_WEB-ITnose