将两个div彼此对齐

Question

我正在尝试将两个div彼此相邻并且遇到一些问题。我查了很多与此相关的堆栈溢出问题，但似乎没有什么能帮助我。

任何人都可以看到我的代码有什么问题？第二个div从低于第一个div开始，我也希望两者之间存在差距 提前致谢

（我尝试使用和不使用垂直对齐：顶部）

#parent {
  width: 96%;
}

#Div1 {
  float: left;
  width: 46%;
  left: 1%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Div2 {
  float: left;
  width: 46%;
  left: 49%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

<div id="parent">
  <div id="Div1">some text</div>
  <div id="Div2">some more text</div>
  <br style="clear: both;" />
</div>

Answer 1

删除左边：％和父宽度％

#parent {
}

#Div1 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

#Div2 {
  float: left;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  vertical-align: top
}

https://jsfiddle.net/pzj7nop6/

Answer 2

最好使用flexbox代替float: left float: right。 Flexbox将让您的生活更轻松！

现在提问：

#parent {
    display: flex;
    justify-content: space-between;
}

就是这样！看看flexbox有多容易？

Answer 3

将它们设为display: inline-block;，删除float并在左侧添加margin-right。

#parent {
  width: 96%;
}

#Div1 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-right: 10px;
}

#Div2 {
  display: inline-block;
  width: 46%;
  border: 1px solid rgba(0, 0, 0, 1);
}

<div id="parent">
  <div id="Div1">some text</div>
  <div id="Div2">some more text</div>
</div>

Answer 4

#Div1 {
   box-sizing: border-box;
   float: left;
   width: 45%;
   border: 1px solid rgba(0, 0, 0, 1);
   vertical-align: top;
}

#Div2 {
    float: left;
    box-sizing: border-box;
    width: 45%;
    left: 5%;
    border: 1px solid rgba(0, 0, 0, 1);
    vertical-align: top;
    position: relative;
}

Answer 5

1. 为block1和block 2制作一个公共div
2. 申请css。

的 HTML：

<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>

的的CSS：

.main
{
   width:suitable size(block1+block2) in pixel
   margin:0 auto;
}
.block1
{
width:block1_width;
float:left;
}
.block2
{
width:block2_width;
float:right;
}