时间戳

首页 > 解决方案 > 不能并排放置 div

html - 不能并排放置 div

问题描述

网页有两个 div（Box1 和 Box2），Box2 包含两个嵌套的 div，Box2-1 和 Box2-2。

我希望 Box1 和 Box2 并排对齐，但 Box1 向下移动并与底部的子 div Box2-2 对齐。

请教我为什么会发生这种情况以及如何解决这个问题。任何帮助将非常感激。

#box1{
    width: 200px;
    height: 845px;
    
}
#box1, #box2{
    border: 1px solid black;
    display: inline-block;
    margin: 0px 20px;
}
#box2-1, #box2-2{
    height : 400px;
    width: 200px;
    border : 1px solid black;
    box-sizing: border-box;
    margin: 15px;
    display: block
}
<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
            <div id="box1">
                <p>Box1</p>
            </div>
            <div id="box2">
                <div class="box2" id="box2-1">
                    <p>Box2</p>
                </div>
                <div class="box2" id="box2-2">
                    <p>Box3</p>
                </div>
            </div>
    </body>
</html>

标签： htmlcss

解决方案

我认为这就是你想要的；

#main-div {
  display: flex;
  justify-content: space-evenly;
}

#box1 {
  border: 1px solid black;
}


#box2 {
  border: 1px solid black;
}
<!DOCTYPE html>
<html>
    <head>
        <title</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
      <div id="main-div">
            <div id="box1">
                <p>Box1</p>
            </div>
            <div id="box2">
                <div class="box2" id="box2-1">
                    <p>Box2</p>
                </div>
                <div class="box2" id="box2-2">
                    <p>Box3</p>
                </div>
            </div>
          </div>
    </body>
</html>

如果您需要对此进行解释，请发表评论。

推荐阅读