如何让两个div处于一行

我们知道 div是块级元素,是独占一行的.一般情况下,两个相邻的div是不会处于一行的

例如:

Html代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>让两个div处于同一行</title>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
div2
</div>
</body>
</html>

浏览器效果:

那么如何让两个相邻的div在同一行呢?

有两种方式

方式一:使用float

Html代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>让两个div处于同一行</title>
<style>
div{
float: left;
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
div2
</div>
</body>
</html>

运行效果:

方式二:使用inline-block

Html代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>让两个div处于同一行</title>
<style>
div{
display: inline-block;
}
</style>
</head>
<body>
<div style="height: 40px;width: 80px;background-color: #006ba4" >
div1
</div>
<div style="height: 40px;width: 70px;background-color:chartreuse" >
div2
</div>
</body>
</html>

运行效果:

注意:

(1)为什么要使用display: inline-block;而不是display: inline;,因为display: inline导致元素的height和width样式失效.

(2)这两种方式的显示效果并不是完全一样的,为什呢?

方式二中两个div中会有大小为8px的margin,这是从哪里来的呢?是从body继承过来的.

如何让两个div处于一行相关推荐

两个div并列一行显示的多种方法
以下提供了5种实现两个div并列一行显示的方法,其中最常用的为浮动,还有定位等方法可以实现. 方法一:float浮动,float:left;为左浮动,也可以设置为float:right;右浮动,也可以 ...
让两个div在一行显示，并加上颜色渐变边框
前言: 下面实现的效果是让一个大的div里的两个小div同行显示出来,并给它们加上颜色渐变边框,可以用来展示图片旁边配文字的样式. 清除浮动 div是块状元素,通常情况下独占一行,那么就需要使用flo ...
学习杂记（如何让两个div在同一行）
时不时会要记着一些东西,以防自己忘记总结. CSS浮动 div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 在div的标准流中,无论div多小,它都独占一行,相互没有交集. 但是很多 ...
Web前端培训：两个div在同一行可以实现吗？
我们在写页面的时候经常会遇到需要将两个div盒子同行显示的情况,那么"两个Div同行显示"该如何显示呢?一般两个div同行显示可以用float: left和display: inl ...
如何让两个div在同一行显示?一个float搞定
最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...
html中如何div转换下一行,css如何让两个div不换行显示？
css如何让两个div不换行显示?让两个div并列显示?下面本篇文章就来给大家介绍一下使用CSS让两个div并列在一行显示的方法,希望对大家有所帮助. 在HTML中,div是块状元素,div盒子本身默 ...
HTML如何使两个div在同一行
让两个div标签在同一行,需两个div的样式加上style="display: inline;" 记得两个都要加,因为块级元素前后都有换行符. <html> < ...
html两个div一个在前一个在后,html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将"第一个div"和"第二个div"显示在同一行: /* ...
处理两个div不在同一行（自用，两种方法）
方法1:浮动通过浮动使两个div在同一行显示,两个div同时左浮动(float: left)或者有浮动(float: right). 方法2:display: inline-block转为行内块使 ...

如何让两个div处于一行

如何让两个div处于一行相关推荐

最新文章

热门文章