css实现两个div并列显示的多种方法介绍

迈不过友情╰ 2024-03-23 00:21 82阅读 0赞

![c4d5b7fe0c05b125fbb67f81c09d26c5.jpeg][]

CSS是一种样式语言，其中,两个div并列的实现是很常见的需求，本文就来介绍一下css实现两个div并列显示的多种方法，具有一定的参考价值，感兴趣的可以了解一下

方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>#div</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>blue</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>float</code><code>:</code><code>left</code><code>;</code> <code>}</code> <code>#div</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>float</code><code>:</code><code>left</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方法二：display:table-cell

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </td> 
 <td> <code>#parent{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>100%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display</code><code>:table;</code> <code>}</code> <code>#div</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>blue</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display</code><code>:</code><code>table-cell</code><code>;</code> <code>}</code> <code>#div</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display</code><code>:</code><code>table-cell</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方法三：负margin

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>#parent{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display</code><code>:flex;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>overflow</code><code>:</code><code>hidden</code><code>;</code> <code>}</code> <code>#div</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>blue</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding-bottom</code><code>:</code><code>2000px</code><code>;&nbsp; </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-bottom</code><code>:</code><code>-2000px</code><code>;&nbsp; </code> <code>}</code> <code>#div</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding-bottom</code><code>:</code><code>2000px</code><code>;&nbsp; </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-bottom</code><code>:</code><code>-2000px</code><code>;&nbsp; </code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方法四：绝对定位

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>*{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin</code><code>:</code><code>0</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>padding</code><code>:</code><code>0</code><code>;</code> <code>}</code> <code>#div</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>blue</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position</code><code>:</code><code>absolute</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>left</code><code>:</code><code>0</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>top</code><code>:</code><code>0</code><code>;</code> <code>}</code> <code>#div</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>position</code><code>:</code><code>absolute</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>transform:translate(</code><code>100%</code><code>, </code><code>0</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

方法五：flex布局

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>#parent{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display</code><code>:flex;</code> <code>}</code> <code>#div</code><code>1</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>blue</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex:</code><code>1</code><code>;</code> <code>}</code> <code>#div</code><code>2</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>50%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background</code><code>:</code><code>green</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex:</code><code>1</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

到此这篇关于css实现两个div并列显示的多种方法的文章就介绍到这了,希望可以帮到你！

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

[c4d5b7fe0c05b125fbb67f81c09d26c5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/05eeffef915947fe980ec0b429e43023.png
[Link 1]: https://www.weidianyuedu.com