Question

我正在建立一个简单的html页面，我基本上试图让两个div容器占据网站的全屏。一个在左边，一个在右边。两者都占据了50％的页面。出于某种原因，body代码行之后的任何内容都没有显示出来。这是我的标记

<!DOCTYPE html>
<html>
<head>

  <title>Website Name</title>

  <meta name="author" content="Name" />
  <meta name="description" content="" />

  <style type="text/css">
  body, html {
    margin: 0;
    height: 100%;
    background: #000;
  }
  .wrapper{
    width:100%;
    height:100%;
    margin:0;
  }
  .container-left{
    width:50%;
    height:100%;
    background:#fff;
    display:inline-block;
  }

  .container-right{
    width:50%;
    height:100%;
    background:#ff0;
  }
</stlye>

</head>

<body>

<div class="wrapper">
  <div class="container-left"></div>
  <div class="container-right"></div>
</div>

</body>

</html>

由于某些奇怪的原因，没有任何容器正在显示。我认为虽然容器中没有任何东西，但如果设置了高度和宽度，它们仍然可以显示。任何人都可以解释为什么这不起作用吗？

Answer 1

我认为你希望它显示如下，如果它的块显示在第一个div下面。你可以通过给出颜色来试试。我曾使用flex并排发表

body,
html {
  margin: 0;
  height: 100%;
  background: #800000;
}

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  display: inline-flex;
}

.container-left {
  width: 50%;
  height: 100%;
  background: #ff0;
}

.container-right {
  width: 50%;
  height: 100%;
  background: #10B4F9;
}

<div class="wrapper">
  <div class="container-left"></div>
  <div class="container-right"></div>
</div>

Answer 2

查看代码时，您的结束样式标记拼写错误。

容器没有出现在简单的html页面中

2 个答案: