尽管 Div 是行内块但未对齐

Question

问题是两个框没有在相同的高度对齐，即使它们具有相同的内容。

当我使用 margin-top 定位任何 individual div 时，整个主要部分向上或向下移动。为什么即使我使用了内联块也会发生这种情况：

.box-1 {
  border: 3px solid red;
  border-radius: 3px;
  background-color: black;
  color: whitesmoke;
  width: 45%;
  border-width: 5px;
  height: 194px;
  display: inline-block;
  margin-right: 101px;
}

.box-2 {
  display: inline-block;
  border: 2px solid plum;
  background-color: powderblue;
  color: black;
  border-width: 4px;
  border-radius: 14px;
  width: 33%;
  margin-top: 15px;
  margin-left: 62px;
}

<main>
  <div class="box-1">
    <h1>Hello World</h1>
    <p>lorem30</p>
  </div>
  <div class="box-2">
    <h1>Bye-Bye World</h1>
    <p>lorem30</p>
  </div>

</main>

PS：使它们的宽度相同可以解决问题，但实际上并非如此，因为 div 几乎对齐但它们不会在 [=30= 中移动 up/down ]idually.

Answer 1

它是单个框的 css。您已为第一个框分配了固定高度。不是第二个盒子。我添加了第三个 class 并在那里添加了高度并将其分配给两个框。

.box {
  display: inline-block; 
  height: 194px;  
}

.box-1 {
    border: 3px solid red;
    border-radius: 3px;
    background-color: black;
    color: whitesmoke;
    width: 45%;
    border-width: 5px;
    height: 194px;  
    margin-right: 101px;
}


.box-2 {
    
    border: 2px solid plum;
    background-color: powderblue;
    color: black;
    border-width: 4px;
    border-radius: 14px;
    width: 33%;
    margin-top: 15px;
    margin-left: 62px;
}

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href="style.css">
    <title>Hello World</title>
</head>

<body>
    <main>
        <div class="box-1 box">
            <h1>Hello World</h1>
            <p>lorem30</p>
        </div>
        <div class="box-2 box">
            <h1>Bye-Bye World</h1>
            <p>lorem30</p>
        </div>

    </main>
</body>
</html>

Answer 2

我不确定我理解你的问题。你想让这两个 div 水平对齐吗？还是垂直？您可以将 flex 用于此类内容。将此样式指定给您的主标签：

main{
display:flex;
align-items:center;
}

这将使它们水平对齐。对于垂直对齐添加：

flex-dirextion:column;

尽管 Div 是行内块但未对齐

Divs not aligned though they are inline-blocks

html

css

alignment