gpt4 book ai didi

html - margin-right 没有显示

转载 作者:太空宇宙 更新时间:2023-11-04 02:01:46 25 4
gpt4 key购买 nike

下面是我的 CSS 和 HTML 代码。如您所见,右边的边距没有出现。

  1. 谁能告诉我这是为什么?
  2. HTML、CSS的结构对吗?我必须在页面中间显示两个窗口以及一个页脚和一个页眉。所以,我把一切都定位为绝对的。

这是正确的做法吗?

*{
margin:0;
padding: 0;
box-sizing: border-box;
}

body{
min-height: 100vh;
min-width: 100vh;
}

.wrapper{
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
background-color: #666;
overflow-x: hidden;
}

.header{
position: absolute;
margin: 0;
top: 0%;
height: 10%;
width: 100%;
background-color: #fff;
}

.footer{
position: absolute;
bottom: 0%;
height: 10%;
width: 100%;
background-color: #f7f7f7;
}

.header .brand-header{

}

.window{
position: absolute;
width: 100%;
top: 10%;
bottom: 10%;
background-color: #eee;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>

<div class="wrapper">
<div class="header"> </div>

<div class="window">
<div class="sub-window left-window"> </div>
<div class="sub-window right-window"> </div>
</div>

<div class="footer"> </div>
</div>
</body>
</html>

最佳答案

calc一样应用宽度

.window {
background-color: #eee;
bottom: 10%;
margin: 10px;
position: absolute;
top: 10%;
width: calc(100% - 20px); /*You apply margin:10px;*/
}

关于html - margin-right 没有显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41633488/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com