如何让两个<div>在一个<div>里面并排

最新推荐文章于 2023-01-25 09:26:56 发布

rukia0811

最新推荐文章于 2023-01-25 09:26:56 发布

阅读量2.1k

点赞数 1

分类专栏： CSS 文章标签： div float

本文链接：https://blog.csdn.net/rukia0811/article/details/6681074

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

把第一个div定义好了。
#a{
width:300px;
}
#a div{
float:left;
width:150px;
}
<div id="a">
<div></div>
<div></div>
这样应当就行吧，反正是这种思路。
</div>

/*************用display:inline*********/
<div>
<div style="display:inline"></div>
<div style="display:inline"></div>
</div>

/*********表格也可以实现，但是表格是需要整个表格下载完成后才能显示出来*********************/
<table>
<tr>
<td><div>a</div></td>
<td><div>b</div></td>
</tr>
</table>

/*************这种使用absolute来实现的***************************************************/

<div style="position:absolute;top:200">a</div>
<div style="position:absolute;top:200">b</div>

/***********用到float************************************************/
<body>
<div style="width:50%;height:320px;background-color:#cc0dd0;float:left">第一个DIV (左)</div>
<div style="width:50%;height:320px;background-color:#ee0bb0">第二个DIV (右)</div>
</body>