Html 在同一行中对齐2个div，而不使用float_Html_Css_Web

Html 在同一行中对齐2个div，而不使用float

html css web

Html 在同一行中对齐2个div，而不使用float,html,css,web,Html,Css,Web,我是一个网站设计和实践的新手。我想在一行中对齐两个div，而不使用float。我有一个宽度为1400px的父div。我想要两个600px宽的子div，每个子div相邻对齐，两边的边距相等。下面是我的代码。请建议另外，float对DOM做了哪些更改？我注意到，如果我使用float，我还需要指定高度？是这样，还是我在理解浮动的作用时犯了一些错误 <html> <head> <title> My Page </title>

我是一个网站设计和实践的新手。我想在一行中对齐两个div，而不使用float。我有一个宽度为1400px的父div。我想要两个600px宽的子div，每个子div相邻对齐，两边的边距相等。下面是我的代码。请建议

另外，float对DOM做了哪些更改？我注意到，如果我使用float，我还需要指定高度？是这样，还是我在理解浮动的作用时犯了一些错误

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


我的页面
儿童1
儿童2
梅因先生{
宽度：1400px；
背景色：#C3C3；
位置：相对位置；
显示：内联块；
}
.儿童1{
背景色：#666；
宽度：600px；
保证金：自动；
}
.儿童2{
背景色：#888；
宽度：600px；
保证金：自动；
}

您可以这样做

.main{
宽度：1400px；
背景色：#C3C3；
位置：相对位置；
文本对齐：居中；
}
.儿童1{
背景色：#666；
宽度：600px；
保证金：自动；
显示：内联块；
}
.儿童2{
背景色：#888；
宽度：600px；
保证金：自动；
显示：内联块；
}


儿童1
儿童2

好吧，如果我是你，我会使用bootstraps列span，阅读这里，这实际上是一个参考，关于你的答案。：）

更新：对不起，我是个新手，希望这对你有帮助：））


内容1
内容2

您可以像这样使用flexbox：

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

可通过以下方式完成：

.main div { display: inline-block; }

两个div之间应该有空格

这应该可以做到（至少大致做到）：

Float实际上是将图片（或类似元素）放在页面的一侧，并使文本在其周围流动。将元素水平排列在一起经常被“滥用”，但这也会产生问题。

您得到的许多答案都是好的，自从CSS成为一种东西以来，人们一直在这样做。另一种方法是在父包装器上使用

position:relative

，在子元素上使用

position:absolute

，这完全取决于您的环境

.wrapper{
边框：1px纯红；
最小高度：50vh；
最小宽度：100vw；
位置：相对位置；
}
.wrapper>div{
位置：绝对位置；
}
.包装器，首先{
排名：0；
左：0；
宽度：48vw；
边框：1px点绿色；
身高：100%；
}
.wrapper.第二{
排名：0；
右：0；
宽度：48vw；
边框：1px橙色虚线；
身高：100%；
}


这是内容1
这是内容二。

即使我也想使用引导程序，但由于我处于学习的早期阶段，我想先学习核心：）嗯，我会在下班后更新：）尝试上面的代码，它可能会帮助你：）答案本身需要更多的解释，以及你的答案如何帮助内容1 CONTENT2

.main div { display: inline-block; }

.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;
}