Question

所以在我的网站上，我使用两个包含模块的列来显示其中的信息，如下所示：

但是我自己正在使用垂直监视器，所以当我将宽度更改为更多横向格式时，它看起来像这样：

目前我正在使用的css代码如下所示：

.module2 {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: cover;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    .module2inside {
        width: 90%;
        height: 75%;
        top: 20%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

module2inside用实际内容表示半透明内部，module2作为背景。 module2inside只是module2中的一个div。因此，无论页面的宽度如何，我都可以这样做，使内部保持在切口区域下方。

Answer 1

您应该删除顶部元素中的百分比，并为像素中的margin-top设置修正值，例如：

    .module2 {
        display: block;
        border-radius: 0px 0px 25px 25px;
        background: url(wallparapet.png) no-repeat;
        background-size: 100% auto;
        width: 85%;
        height: 250px;
        margin-top: 30px;
        margin-bottom: 30px;
        margin-right: auto;
        margin-left: auto;
    }    
    .module2inside {
        width: 90%;
        height: 75%;
        border-radius: 25px;
        position: relative;
        margin: 0 auto;
        margin-top: 100px;
        background-color: #FFF;
        background-color: rgba(255, 255, 255, 0.8);
    }

如何根据页面宽度更改div边距？

1 个答案: