Question

我是网页设计和实践网站的新学员。我想在一行中对齐2个div而不使用float。我有一个宽度为1400px的父div。我想要2个宽度为600px的子div，它们彼此相邻并且两侧的边距相等。以下是我的代码。请建议。

此外，浮动对DOM做了哪些改变？我观察到，如果我使用浮动，我还需要指定高度？是这样的，还是我在理解浮动的角色时犯了一些错误？

<html>
  <head>
    <title>
      My Page
    </title>
  </head>
  <body>
    <div class="main">
      <div class="child1">Child 1</div>
      <div class="child2">Child 2</div>
    </div>
  </body>
</html>

.main{
  width:1400px;
  background-color:#c3c3c3;
  position: relative;
  display: inline-block;
}
.child1{
  background-color:#666;
  width: 600px;
  margin:auto;
}
.child2{
  background-color:#888;
  width : 600px;
  margin:auto;
}

Answer 1

你可以这样做。

.main {
  width: 1400px;
  background-color: #c3c3c3;
  position: relative;
  text-align: center;
}
.child1 {
  background-color: #666;
  width: 600px;
  margin: auto;
  display: inline-block;
}
.child2 {
  background-color: #888;
  width: 600px;
  margin: auto;
  display: inline-block;
}

<div class="main">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

或者你可以改善你css。

.main {
  width: 1400px;
  background-color: #c3c3c3;
  position: relative;
  text-align: center;
}
.main div {
  display: inline-block;
  width: 600px;
  margin: auto;
}
.main div.child1 {
  background-color: #666;
}
.main div.child2 {
  background-color: #888;
}

<div class="main">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

Answer 2

您可以像这样使用flexbox：

.main {
    display: flex;
    justify-content: space-between;
 }

Answer 3

好吧，如果我是你，我会使用bootstraps列span，在这里阅读http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp，这实际上是一个参考，答案就在你身上。：）

更新：抱歉，我是新手，希望这可以帮到你:)）

<div class="container">
  <div class="row">
     <div class="col-md-6">CONTENT1</div>
     <div class="col-md-6">CONTENT2</div> 
  </div> 
</div>

Answer 4

可以完成：

.main div { display: inline-block; }

期望div之间有空格。

Answer 5

这应该可以解决问题（至少粗略地说）：

.main{
  width:1400px;
  background-color:#c3c3c3;
  position: relative;
  display: table-row;
}
.child1{
  background-color:#666;
  width: 600px;
  margin:auto;
  display: table-cell;
}
.child2{
  background-color:#888;
  width : 600px;
  margin:auto;
  display: table-cell;
}

Float实际上是为了在页面的一侧放置图片（或类似的元素）并让文本围绕它。通常“滥用”将元素水平地包装在一起，但这会产生自己的问题。

Answer 6

你得到的很多答案都很好，人们一直在这样做，因为CSS成了一件事。你可以做的另一种方式，以及你想要的任何方法，仅取决于你的情况是在父包装上使用position:relative，在position:absolute使用任何子元素

.wrapper {
  border: 1px solid red;
  min-height: 50vh;
  min-width: 100vw;
  position: relative;
}
.wrapper > div {
  position: absolute;
}
.wrapper .first {
  top: 0;
  left: 0;
  width: 48vw;
  border:1px dotted green;
  height:100%;
}
.wrapper .second {
  top: 0;
  right: 0;
  width: 48vw;
  border:1px dashed orange;
  height:100%;
}

<div class="wrapper">
  <div class="first">
    This is content number 1
  </div>
  <div class="second">
    This is content number two.
  </div>
</div>

另一种方法是将容器div设置为显示为行，然后将两个子元素显示为表格单元格。在CSS变得广泛之前，表格是一种旧的回归（你能相信在border-radius之前有一段时间吗？）

.wrapper {
  display: table-row;
  background-color: red;
  width: 100%;
  height: 50vh;
}
.wrapper > div {
  display: table-cell;
  width: 48%;
}
.first {
  border: 1px solid orange;
}
.second {
  border: 1px dotted green;
}

<div class="wrapper">
  <div class="first">
    First Child
  </div>
  <div class="second">
    Second Child
  </div>

</div>

真的有一堆，你只需要弄清楚哪一个最适合你。

在不使用float的情况下将2个div对齐在同一行中

6 个答案: