多个div怎么在一个div中并排显示

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多个div怎么在一个div中并排显示相关的知识，希望对你有一定的参考价值。

一、使用display的inline属性

复制代码代码示例:
<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并排显示

复制代码代码示例:
<style>
#left,#right float:left;border:1px solid red; padding:10px;
</style>
<div id= "main ">
<div id= "left "> 1111 </div>
<div id= "right "> 2222
2222
2222 </div>

<div style="clear:both"></div>
</div>
三、对于两个div并排，左边为绝对宽度，右边为相对宽度的，需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面
1、将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百
2、使用position:absolute。代码如下。

复制代码代码示例:
<style>
body margin:0; height:100%
html height:100% /*兼容firefox的div高度100%*/
#left position:absolute; top:0; left:0; width:200px; height:100%; background-color:#cccccc
#right margin-left:200px; height:100%; background-color:#0099ff
</style>
<div id="left">left</div>
<div id="right">right</div>
要点：
1）、兼容firefox实现div高度100%；
2）、div绝对定位的妙用；在页面布局的时候，position:absolute如果灵活的应用，可以达到很好的效果。参考技术A 采用浮动标签float标签，或者ul li标签，写一个float如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style>
.left
float:left;
height:100px;
width:100px;
border:1px #CCCCCC solid;

</style>

<body>
<div>
<div class="left">sss</div>
<div class="left">sss</div>
<div class="left">sss</div>
<div class="left">sss</div>
<div class="left">sss</div>
</div>
</body>
</html>
望采纳参考技术B 可以，只要把css控制好完全没有问题，如果你不会我可以帮你写一个demo.

使块元素并排显示和清除浮动的方法

使多个块元素并排显示：

①inline-block:内敛块，不占一行，但可以设置宽高属性，将块元素的display设置为inline-block，可以让多个div块横向显示。但是该用法下多个块之间会出现空格，是由于相邻两个</div>与<div>之间的换行符引起的，空格的清除办法：

①去掉换行符（不推荐）：页面不美观
②注释（不推荐）:将换行部分注释掉
③将上一行的>移到下一行（不推荐）:页面不美观
④将要并排显示的div添加父元素，并且给父元素div添加属性:font-size:0;(但该种方法会有一系列并发问题需要改正)

②浮动：

文档流：自上而下解读文档时，文档是以流状的状态。

要并排显示的块元素设置属性：float:left/right，即让块元素脱离文档流漂浮起来，实际上并没有占父元素的空间，只是显示出来而已，使块元素按照浮动方向移动，遇到父元素或相邻元素边界就停住。如代码:

.son{
    width:100px;
    height:100px;
    background-color:red;
    }
<div>
    <div class="son"></div>
<div>

该代码中实际父元素的height为子元素的height，独占一行。如果加入该属性，见代码：

.son{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
    }
<div>
    <div class="son"></div>
</div>

则父元素的height还是为0,且独占一行，所以子元素并没有在父元素中，只是向垂直于我们视线的方向上平移了。

清除浮动：若没有清除浮动则实际上看到有元素的位置上其实没有元素，其他元素还是会占该位置，所以需要清除浮动。

①overflow:hidden(还有其他属性值：scroll、auto)

hidden可以清除浮动，还可以使溢出父元素的子元素的溢出部分隐藏

②;：可以清除浮动但会加入空标签

③（推荐）在父元素内加入下列属性：

.clearfix:before,.clearfix:after{
    display:table;
    content:""; <!--该属性只有在该伪类下可以使用-->
    }
.clearfix:after{
    clear:both;
    }
.clearfix{
    *200m:1;
    }

以上是关于多个div怎么在一个div中并排显示的主要内容，如果未能解决你的问题，请参考以下文章

HTML中如何让两个div并排显示，举个例子