两个div并排显示代码怎么写?

自问自答 老翟笔记 2023-11-30 13:03:48 334 0

两个div怎么并排显示?两个div并排显示代码要怎么写?

要写这个代码还是比较简单的,大概的思路就是用一个大的div套住两个小的div,然后让两个小的div都左漂浮,再设定小的div的大小、高度、margin值、padding值等就可以了。

具体代码如果不会写的就照抄下面的吧

<div style="width:90%;margin: 10px auto 20px;display: flex;justify-content: center;">
<div style="float:left;width:300px;height:300px;text-align: center;margin: 5px;padding: 5px 5px 15px;border: 1px dashed var(--be-border-dashed);">这里是图片</div>
<div style="float: left;width:300px;height:300px;text-align: center;margin: 5px;padding: 5px 5px 15px;border: 1px dashed var(--be-border-dashed);">这里是图片</div>
</div>

这里老翟直接用了内置css样式,如果不想内置就自行把style里面的内容封装到class里面。

最终的效果请参考文章下方的样子。

  • 随机文章
  • 热门文章
  • 热评文章

评论区