如何将两个<div>...</div>放在同一行？

Question

如何将两个<div>...</div>放在同一行？

html

9

我的意思是，这两个标签的高度相同。

- Keating

6个回答

9

简单易懂：使用 <span> 标签代替 <div> 标签。

<div> 标签默认为 display: block，意味着下一个元素会在新的一行显示。

您可以将它们更改为 display: inline 以获得所需的行为。但请记住，内联的 <div> 只是一个 <span>。

- Yuval Adam

2

使用 div 容器，将所有 div 放入其中。

.div_container{
    display: flex;
    flex-direction: row;
}

很简单！

- Abraxas

2

使用CSS使它们浮动：

float: left

- simshaun

1

让它们浮动：

HTML


<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>

CSS


.clear { clear: both; }
.container1, .container2 { float: left; }

你需要清除浮动... 所以使用 clear both :)

- mark_dj

1

浮动会破坏我的页面居中对齐。这是我得到的，我想让2和3在同一行而不失去页面居中对齐。浮动不起作用，因为当我调整浏览器大小时，它会随之移动。

<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
   background: #faa;
   width: 500;
 }

.div2 {
  background: #ffc;
  width: 400;
  margin-right: 100px;
}
.div3 {
  background: #cfc;
  width: 100;
  margin-left: 400px;

}


</style>
</head>

<html>
<body>
<center>

<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>

</center>
</body>
</html>

- Jose Balboa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ives.me · Accepted Answer

尝试在所有 div 元素上使用此代码。

display:inline-block;