-1

无法让我的 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>

4

4 回答 4

2

为您的 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>

于 2019-03-20T20:45:04.590 回答
1

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

于 2019-03-20T20:44:46.193 回答
1

我相信要解决您的问题，您必须在 CSS 中添加位置。更重要的是，从顶部到底部高度的主 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>
于 2019-03-20T20:59:29.123 回答
0

您必须指定 div 块的高度。

于 2019-03-20T20:44:19.423 回答