「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 属性即可。

三角

<div class="three"></div>

.圣杯布局和双飞翼布局

2.绝对定位法

左右div设置为绝对定位；左div设置为 left: 0px;右div设置为 right: 0px;

如：

<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	            position: absolute;
	            top: 120px;
	        }
	        #left{
	            left: 0px;
	        }
	        #right{
	            right: 0px;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>实现三列宽度自适应布局</h3>
	    <div id="left">我是左边</div>
	    <div id="right">我是右边</div>
	    <div id="center">我是中间</div>
	</body>
	</html>

该布局的不足：因为是绝对定位，如果页面上有其他的内容，top的值要小心处理，最好给CSS样式进行一个初始化。

3.使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

如下：

<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	        }
	        #left{
	            float: left;
	        }
	        #right{
	            float: right;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>实现三列宽度自适应布局</h3>
	    <div id="left">我是左边</div>
	    <div id="right">我是右边</div>
	    <div id="center">我是中间</div>
	</body>
	</html>

该布局法的好处是受外界影响小，但是不足是三个元素的顺序，center一定要放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

在线咨询

上一篇：Node.js 学习笔记：构建 Web 服务
下一篇：前端基础：HTML

您的项目需求

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

整合营销服务商