编写网页前端代码时，经常用到div标签。那么如何让两个div并排呢？方法如下。工具/原料moreAdobe Dreamweaver（任选以下一种编辑方式即可） Microsoft Expression Web CoffeeCup HTML Editor 推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。方法/步骤1/3分步阅读

首先，定义一个主div,然后在里面添加两个小div。

作用：用主div来控制两个小div并排的效果。

代码如下：

div id=main

div id=left…此处添加你要展示的内容…/div

div id=right…此处添加你要展示的内容…/div

/div

2/3

现在用样式来控制并排效果。

有两种方法。

一. 按整体像素宽度来布局。

div id=main style=width:1200px;

div id=left style=width:300px;float:left;…此处添加你要展示的内容…/div

div id=right style=width:900px;float:left;…此处添加你要展示的内容…/div

/div

备注：左右两个div的宽度之和等于主div的宽度。

效果如下图。

3/3

二. 按百分比宽度来布局。

div id=main style=width:100%;

div id=leftstyle=width:25%;float:left;…此处添加你要展示的内容…/div

div id=rightstyle=width:75%;float:left;…此处添加你要展示的内容…/div

/div

备注：左右两个div的占比之和等于主div的占比。

效果如下图。

注意事项

记得添加float:left，即左浮动。