前言：

下面实现的效果是让一个大的div里的两个小div同行显示出来，并给它们加上颜色渐变边框，可以用来展示图片旁边配文字的样式。

清除浮动

div是块状元素，通常情况下独占一行，那么就需要使用float属性

<!DOCTYPE html>
<html lang="en">
<head><title>float</title><style>.home{/* 清除浮动 */overflow: hidden;}.text{   float: left }.image{  float: left; }</style>
</head>
<body><div class="home"><div class="text">  </div><div class="image"> </div></div>
</body>
</html>

给子组件加上float属性可以让它们在同一行内，left 表示向左浮动

记住父组件一定要清除浮动，要加上 overflow: hidden;

这里展示的文字和图片是我自己随便找的

文字：

传智播客UI设计学院

”UI设计师(简称UID)“已经成为全球性知名IT企业招聘最热门的岗位，正逐渐成为大学毕业生所追捧的热门职业方向。传智播客UI设计学院花一份钱同时学习四门技术，针对平面设计、网页设计、UI设计、Web前端培训一步到位，让你从小白变大神，高薪就业！

图片：

设置颜色渐变边框

在css中可以利用 border-image 属性和 linear-gradient() 函数来写一个渐变的边框。

border-image 属性用于设置元素的边框样式，linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

设置边框和渐变

.home{/* 清除浮动 */overflow: hidden;/* 设置边框 */border: 20px solid;  /* 设置边框颜色渐变 */border-image: linear-gradient(red,rgb(216, 104, 38),rgb(189, 32, 32))30 30;width: 600px; }

最终效果：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head><title>float</title><style>.home{overflow: hidden;/* 设置边框 */border: 20px solid;  /* 设置边框颜色渐变 *//*  后面的30 30 就是border-image-slice这个参数 具体不明白的可以多查阅多方资料*/border-image: linear-gradient(red,rgb(216, 104, 38),rgb(189, 32, 32))30 30;width: 600px;margin-top: 10%;margin-left: 22%; }.text{width: 250px;height: 220px;float: left;}.image{padding-left: 10px;float: left;}.title{color: #f0923b;font-size: 20px;padding: 5px;}</style>
</head>
<body><div class="home"><div class="text"><div  class="title">传智播客UI设计学院</div>
”UI设计师(简称UID)“已经成为全球性知名IT企业招聘最热门的岗位，正逐渐成为大学毕业生所追捧的热门职业方向。传智播客UI设计学院花一份钱同时学习四门技术，针对平面设计、网页设计、UI设计、Web前端培训一步到位，让你从小白变大神，高薪就业！</div><div class="image"><img src="https://img-blog.csdnimg.cn/1fdac6adafb04a16a8bd7d9e9d81e69d.png" ></div></div>
</body>
</html>

总结：

要实现以上效果，首先是要清除浮动，相信这个应该大家都不陌生，重点是使用 border-image属性和 linear-gradient() 函数来实现一个渐变的边框。

本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124758206?spm=1001.2014.3001.5501

让两个div在一行显示，并加上颜色渐变边框相关推荐

两个div并列一行显示的多种方法
以下提供了5种实现两个div并列一行显示的方法,其中最常用的为浮动,还有定位等方法可以实现. 方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以 ...
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示?让两个div并列显示?下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法,希望对大家有所帮助. 在HTML中,div是块状元素,div盒子本身默 ...
HTML如何让两个div并排在一行,怎么让两个div并排同行显示
如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 DIV1 DI ...
行内元素，块级元素div在一行显示
行内元素,块级元素div在一行显示行内元素无法设置padding-top,padding-bottom,margin-top,margin-bottom,width,height:除非将行内元素改为 ...
如何让两个div处于一行
我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的例如: Html代码 <!DOCTYPE html> <html> <head ...
Web前端培训：两个div在同一行可以实现吗？
我们在写页面的时候经常会遇到需要将两个div盒子同行显示的情况,那么"两个Div同行显示"该如何显示呢?一般两个div同行显示可以用float: left和display: inl ...
多个div在同一行显示
使用float:left,也可以使用display : inline-block,可以使多个div在同一行显示. <div class="search_row">< ...
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
如何使两个div在同一行显示
在CSS中,div属于块级元素,每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外).两个块级元素连续编辑时,会在页面自动换行显示.所以默认情况下,2个 ...

让两个div在一行显示，并加上颜色渐变边框

前言：