Question

我的div标签无法使用CSS有人可以指出我在这里犯的错误。尝试让一个div占据页面的70％（从左到上，从下至上），其他两个div则共享其余部分。添加颜色只是为了让我看是否正确，但根本不显示。

#master {
  width: 70%;
  top: 0;
  left: 0;
  background: orange
}

#detail1 {
  top: 0;
  left: 70%;
  background: blue
}

#detail2 {
  top: 50%;
  left: 70%;
  background: green
}

<header>
</header>

<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>

<aside>
  Hello Ben
</aside>

<footer>
</footer>

Answer 1

为您的div增加身高

#master {
  width: 70%;
  top: 0;
  left: 0;
  background: orange;
      height: 15px;
}

#detail1 {
  top: 0;
  left: 70%;
  background: blue;
      height: 15px;
}

#detail2 {
  top: 50%;
  left: 70%;
  background: green;
      height: 15px;
}

<header>
</header>

<div id="master"></div>
<div id="detail1"></div>
<div id="detail2"></div>

<aside>
  Hello Ben
</aside>

<footer>
</footer>

Answer 2

由于您的div块（母版，detail1，detail2）为空，因此它们根本不会显示。通过css height属性输入一些内容或设置高度。

Answer 3

我相信要解决您的问题，您必须在CSS中添加位置。要使master div从顶部到底部的高度还要多，应将其定义为宽度，以使用屏幕剩余空间的细节。像这样：

<!DOCTYPE html> <html> <head>
    <meta charset="utf-8" />
    <title>My new Page II</title>
    <style>
        #master{
            position: absolute;
            top: 0;
            left: 0;
            width:70%;            
            height: 100%;

            background: orange
        }
        #detail1{
            position: absolute;
            top: 0;            
            left: 70%;
            height: 50%;
            width: 30%;
            background: blue
        }

        #detail2{
            position: absolute;
            top: 50%;            
            left: 70%;
            height: 50%;
            width: 30%;
            background: green
        } 
    </style> 
</head> 
<body>
    <header>
    </header>

    <div id="master"></div>
    <div id="detail1"></div>
    <div id="detail2"></div>

    <aside>
        Hello Ben
    </aside>

    <footer>
    </footer> </body> </html>

Answer 4

您必须指定div块的高度。

HTML5 CSS样式问题

4 个答案: