对齐两个分区

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

最好使用flexbox而不是float: left float: right。Flexbox将使您的生活更加轻松！

现在您的问题：

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

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

Answer 2

删除左：％和母宽％

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

使它们同时 display: inline-block; s，删除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;
}