几个div有间隙且并排显示的方法

最新推荐文章于 2023-05-18 18:52:04 发布

-然-

最新推荐文章于 2023-05-18 18:52:04 发布

阅读量2.1k

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/qq_42548846/article/details/104420509

版权

本文介绍了在网页开发中如何通过float浮动、inline-block和margin负值来实现多个div并排显示且有间隙的效果。详细讨论了每种方法的实现步骤、存在的问题及解决方案，提供了解决元素排列的实用技巧。

摘要由CSDN通过智能技术生成

在实际开发中，很多情况下需要多个div有间隙的并排显示，下面是我总结的几种方法。

这是我们要实现的效果图

一、使用float浮动

首先，根据要实现的效果图，写出HTML。

<div class="service w960">
        <h3>主要业务/PRODUCTS SERVICES</h3>
        <div class="yw">
            <img src="./images/business1.png" alt="">
            <dl>
                <dt>投资业务</dt>
                <dd>证券投资业务，指银行购买有价证券的活动</dd>
            </dl>
            <a href="#">立即咨询</a>
        </div>
        <div class="yw">
            <img src="./images/business2.png" alt="">
            <dl>