Fatal编程技术网
  • css/
  • HTML5 CSS风格问题

HTML5 CSS风格问题

css html

HTML5 CSS风格问题,css,html,Css,Html,无法让我的div标签css工作，请有人指出我在这里犯的错误。试图让一个div占据页面的70%（左，从上到下），其他两个div共享其余部分。添加了颜色，以便我可以看到是否正确，但根本不显示 #主控{ 宽度：70%； 排名：0； 左：0； 背景：橙色 } #详情1{ 排名：0； 左：70%； 背景：蓝色 } #细节2{ 最高：50%； 左：70%； 背景：绿色 } 你好，本 您必须指定div块的高度。由于您的div块（master、detail1、detail2）为空，因此它们根本不会显示。通过

无法让我的div标签css工作，请有人指出我在这里犯的错误。试图让一个div占据页面的70%（左，从上到下），其他两个div共享其余部分。添加了颜色，以便我可以看到是否正确，但根本不显示

#主控{
宽度：70%；
排名：0；
左：0；
背景：橙色
}
#详情1{
排名：0；
左：70%；
背景：蓝色
}
#细节2{
最高：50%；
左：70%；
背景：绿色
}

你好，本
您必须指定div块的高度。

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

为div添加高度

#主控{
宽度：70%；
排名：0；
左：0；
背景：橙色；
高度：15px；
}
#详情1{
排名：0；
左：70%；
背景：蓝色；
高度：15px；
}
#细节2{
最高：50%；
左：70%；
背景：绿色；
高度：15px；
}

你好，本
我认为要解决您的问题，您必须在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>


我的新网页2
#主人{
位置：绝对位置；
排名：0；
左：0；
宽度：70%；
身高：100%；
背景：橙色
}
#详情1{
位置：绝对位置；
排名：0；
左：70%；
身高：50%；
宽度：30%；
背景：蓝色
}
#细节2{
位置：绝对位置；
最高：50%；
左：70%；
身高：50%；
宽度：30%；
背景：绿色
} 
你好，本
您的空div没有内容或高度。您也没有在它们上设置位置，因此
top
和
left
不会做任何事情。
top
和
left
用于定位元素（即
位置：绝对；
）。你的所有div都没有定位。我添加了背景颜色，并试图按照说明调整大小。