html中怎么样让div并排显示

Posted 2023-05-06

tags:

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

参考技术A

div属于块元素，通俗的讲，块元素会占一整行。如果让一行显示两个div有两种方法。

1、让两个想并排的div的转换成行内元素

divdisplay:inline;

2、让两div设置固定宽度，然后让其浮动显示即可。

divwidth:50%;float:left;

注意也可将div宽度设置成像素宽度，但两个div的宽度加起来不能大于父级div的宽度，只能小于或等于。

html设置多个div并排显示

我这里以4个div为例，html代码如下：

<body>
    <div id="column1" style="background-color: blue;float:left;width:25%">a</div>
    <div id="column2" style="background-color :cyan;float:left;width:25%">b</div>
    <div id="column3" style="background-color: yellow;float:left;width:25%">c</div>
    <div id="column4" style="background-color: red;float:left;width:25%">d</div>
</body>

这里主要是这个float:left。

效果如下：

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