css 如何在显示两个并排的div框时修复这个白色？

a6b3iqyw 于 2023-02-14 发布在其他

关注(0)|答案(1)|浏览(121)

Two div boxes(purple, pink), how to fix that white space above pink box?
HTML代码-

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lecture 3</title>
</head>
<body>    
    <main>
        <div class="box1"> man </div><div class="box2"> man2 </div>
    </main>
        
    <footer>
        <div class="foot">
            Copyright © Mayank Daga
        </div>
    </footer>
</body>
</html>

div部件的CSS代码

.box1{
    background-color: violet;
    display: inline-block;
    width:50%;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'Baloo Bhai 2', cursive;
    height:120vh;
}

.box2{
    background-color: pink;
    display: inline-block;
    width:50%;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'Baloo Bhai 2', cursive;
    height:120vh;
}

我期望不能有任何白色，它必须是统一的。

css

来源：https://stackoverflow.com/questions/75418226/how-to-fix-this-white-space-while-showing-two-div-boxes-beside-each-other

1条答案

按热度按时间

fnx2tebb1#

具有row方向的flex和align-items: flex-start应该在这里工作。

.box {
  display: inline-block;
  padding: 1em;
  width: 50%;
  height: fit-content;
  font-family: 'Baloo Bhai 2', cursive;
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: fit-content;
}

.box1 {
  background-color: violet;
}

.box2 {
  background-color: pink;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lecture 3</title>
</head>

<body>
  <main>
    <div class="container">
      <div class="box box1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</div>
      <div class="box box2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</div>
    </div>
  </main>

  <footer>
    <div class="foot">
      Copyright © Mayank Daga
    </div>
  </footer>
</body>

</html>

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何在显示两个并排的div框时修复这个白色？

1条答案

相关问题

热门标签

最新问答