使用CSS如何让两个div并排显示

html-css09

使用CSS如何让两个div并排显示,第1张

方法一:把div设为“行内块级元素”:

<style>

div {display:inline-block border:1px solid #000}

</style>

<div>第一个div</div>

<div>第二个div</div>

方法二:使用浮动:

<style>

div {float:left border:1px solid #000}

br {clear:both}

</style>

<div>第一个div</div>

<div>第二个div</div>

<br/>

方法三:使用flex布局:

<style>

.main {display:flex flex-direction:row}

.sub {border:1px solid #000}

</style>

<div class=main>

   <div class=sub>第一个div</div>

   <div class=sub>第二个div</div>

</div>

还有其他多种方法实现,就不一一列出了

想要让多个div元素并列成一行,可以将div元素的float属性设置为left。但这样做还不够,应为当浏

览器的宽度小于这几个div的宽度总和时还是会有div会跑到底部,所以需要将想要并列的div元素套

在另外一个大div里,当然,这个大div宽度要大于并排div宽度的总和。这样子,就可以做到怎么变

换窗口大小时div都不会跑到下面了。

以下是具体演示步骤:

1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。

2、在body标签里添加一个大div来容纳并列的div。

3、在大div里添加想要并列的div元素,并在style属性里添加float:left即可

4、运行效果。

新建一个html文件,命名为test.html,用于讲解使用CSS如何让两个div并排显示。

在test.html文件内,使用div标签一个模块,在div内,再使用div标签创建两个内部模块,下面将让两个内部div并排显示。

在test.html文件内,分别给每一个div设置class属性,分别为wdiv,fldiv,frdiv。

在css标签内,设置class为wdiv的div样式,定义其宽度为500px,高度为400px,背景颜色为灰色。

在css标签内,再分别设置class为fldiv和frdiv的样式,定义它们的宽度为240px,高度为350px,同时,使用float属性分别设置一个div浮动向左,另一个浮动向右,从而实现并排显示。

在浏览器打开test.html文件,查看实现的效果。