让两个Div并排显示

一、使用display的inline属性

Html代码

<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并排显示

Html代码

<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>
<div style="clear:both"></div>
</div>

三、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面

1、将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百

2、使用position:absolute。代码如下。

Html代码

<style>
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%;
</style>
<div id="left">left</div>
<div id="right">right</div>

这段代码主要涉及到以下两点点比较重要的：

（1）兼容firefox实现div高度100%；
（2）div绝对定位的妙用；在页面布局的时候，position:absolute如果灵活的应用，可以达到很好的效果。

3、使用float解决div左右布局，左为绝对宽度，右为相对宽度问题

Html代码

<style type="text/css">
body{ margin:0; height:100% }
html{ height:100% }
#left{ width:150px; height:100%; float:left; _margin-right:-3px; yellow }
#main{ height:100%; green }
</style>
<div id="left"></div>
<div id="main"></div>

4、代码如下。方法3可能没有按照题目要求，但是可以达到一样的页面效果。主要是使用了div的float属性。

Html代码

<style>
body{ margin:0; height:100%}
html{ height:100%} /*兼容firefox的div高度100%*/
#left{ width:200px; height:100%; float:left}
#main{ width:100%; height:100%;
</style>
<div id="main">
<div id="left">left</div>
Right
</div>

转载于:https://www.cnblogs.com/jiutiankunpeng/p/4453095.html

让两个Div并排显示相关推荐

HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
css让四个div并排显示,css如何让两个div并排显示？
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,下面我们来看一下CSS实现两个div并排显示的方法. 让两个Div并排显示一. ...
让两个Div并排显示的多种方法
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的 ...
在HTML中实现两个div并排显示
在HTML中实现两个div并排显示在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3) ...
Summary_HTML中让两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
HTML页面中使两个div并排显示如何实现
本文主要介绍了HTML页面中使两个div并排显示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着微点阅读小编来一起学习学习吧在HTML中实现两 ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
两个div并排显示 div居中显示
div并排显示的两种方法 float:left display: inline-block; div居中显示.文字居中显示 text-align: center;margin: 0 auto
HTML如何让两个div并排在一行,怎么让两个div并排同行显示
如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 DIV1 DI ...
（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）...
一.文字环绕效果: html代码如下: 1 <body>2 3 <style type="text/css">4 #big img {float: left ...

让两个Div并排显示

让两个Div并排显示相关推荐

最新文章

热门文章