Question

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

Answer 1

为所有div尝试此操作。

display:inline-block;

Answer 2

简单：使用<span>代替。

<div>默认情况下为display: block，这意味着下一个元素将位于新行上。

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

Answer 3

用css浮动它们：

float: left

Answer 4

使用div容器并放入所有div。

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

那很简单！

Answer 5

让它们漂浮：

HTML


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

CSS


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

你必须清除浮动..所以使用清除：）

Answer 6

Float弄乱我的页面中心对齐。这就是我得到的，我希望在同一行上获得2和3而不会丢失页面居中。 Float不起作用，因为当我调整浏览器大小时，它随之移动。

<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>

如何在同一行中创建两个<div> ... </div>？

6 个答案: