「CSS」将多个div元素并列为一行的方法

、前言

CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。

有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？

二、需求

想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
    <div class="position-name">京东</div>
    <div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>

三、解决

加上 display: inline-block，使之为内联元素，而非块元素即可，修改后的代码如下，修改后的效果如上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .position {
            /* 融合为块元素 */
            display: inline-block;
            margin-left: 8px;
        }

        .position-name {
            font-weight: 600;
        }

        .position-desc {
            font-size: 13px;
            color: #a6a6a6;
        }
    </style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
    <div class="position-name">京东</div>
    <div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>

四、小结

利用好 CSS 提供的 display: inline-block 属性即可。

、使用css float并排显示 - TOP

我们对div设置一个float浮动属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。

加float浮动实现多个div并排显示

这里我们对div通设一个浮动，当然实际使用时候，要通排显示div对象的加入css类，我们就对要同行显示css选择器设置浮动。避免其它不需要设置的也被加入浮动样式。

今天我的项目使用如下：

#left{ margin-top:0px; margin-left:50px; width:400px; height:100%;float:left; background-color:#CCCCCC}

#right{ margin-top:0px; height:100%;float:left }

法一、两个div都设置 display: table-cell;

方法二、父级div设置 display: -webkit-box;

在线咨询

上一篇：前端开发：5款Bootstrap响应式后台管理模板，兼容不同屏幕分辨率
下一篇：HTML里h1~h6标签和p标签里的内容不会自动换行？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。