在HTML中如何让两个div并排显示

 时间:2026-04-22 01:58:23

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

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

代码如下:

<div id="main">

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

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

</div>

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

有两种方法。

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

<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的宽度。

效果如下图。

在HTML中如何让两个div并排显示

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

<div id="main" style="width:100%;">

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

<div id="right" style="width:75%;float:left;">…此处添加你要展示的内容…</div>

</div>

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

效果如下图。

在HTML中如何让两个div并排显示

  • 如何让图片在div中居中显示
  • CSS怎么设分别置大DIV里面的3个并排小DIV靠左 居中 靠右!
  • html轮播图怎么制作
  • div 怎么设置背景图片
  • HTML怎么添加滚动条
  • 热门搜索
    江西明月山旅游攻略 太原有什么旅游景点 太空旅游 西安旅游攻略4天 临海旅游景点大全 武当山旅游景点 云南旅游攻略自驾游 深圳五一去哪旅游好 河南的旅游景点有哪些 蚌埠旅游景点大全