0

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

margin-top当我通过使用整个主要部分向上或向下移动任何单个 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 几乎对齐但它们不会单独向上/向下移动。

4

2 回答 2

1

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

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

于 2021-11-16T17:54:29.203 回答
1

我不确定我是否理解你的问题。你想让两个 div 水平对齐吗？还是垂直？您可以将 flex 用于此类东西。将此样式赋予您的主要标签：

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

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

flex-dirextion:column;
于 2021-11-16T18:39:51.780 回答