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

自问自答 老翟笔记 2023-11-30 13:03 187 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里面。

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

评论区

本站服务

需要广告位、友情链接、软文代写代发、网站代搭建的朋友可联系站长微信:lzbj12333

老翟笔记同款服务器

腾讯云轻量服务器

老翟笔记福利

①5118营销大数据平台:长尾词/流量词挖掘,优惠码:928C21

②老薛主机(优惠码):lzbj123

③腾讯云服务器(福利):优惠券合集

(持续更新...有需要的小伙伴可以领取)