个人中心
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
文章推荐： python - 正则表达式将数值解析为没有星号和空格的数组
文章推荐： c - 一个简单算法的时间复杂度
文章推荐： python - 如何在 Python 中拆分记录？
文章推荐： c - 检测到 glibc - 双重释放或损坏 (!prev)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com