无法正确镜像 div

Question

我正在制作一个站点，当您将鼠标悬停在 div 上方时，它们会扩展，扩展后，它们会在内部显示 link。这与向左延伸的 div 完美配合，但是，当我想镜像 div 并制作一个向右延伸的精确的 [=33] 时，我无法得到 [=33] =] 正确放置。

.hoofdvak
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0px;
            text-align: center;
            position: relative;
        }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.4;
        padding: 10px;
        width: 40%;
        height: 95%;
        transition: all 1s;
        float: right;
        overflow: hidden;
    }
    .inhoudlinks:hover
        {
            opacity: 1.0;
            width: 80%;
        }

.tekstlinks
    {
        height: 100%;
        width: 350px;
        float: left;
    }

.inhoudlinklinks
    {
        position: absolute;
        padding-left: 48%;
        padding-top: 17%;
    }

img.inhoudlinklinks
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinklinks:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

.inhoudrechts
    {
        border-radius: 10px 50px 50px 10px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.4;
        padding: 10px;
        width: 40%;
        height: 95%;
        transition: all 1s;
        float: left;
        overflow: hidden;
    }
    .inhoudrechts:hover
        {
            opacity: 1.0;
            width: 80%;
        }

.tekstrechts
    {
        height: 100%;
        width: 350px;
        float: right;
    }

.inhoudlinkrechts
    {
        position: absolute;
        padding-top: 17%;
        padding-right: 48%;

    }

img.inhoudlinkrechts
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinkrechts:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

令我困惑的是 "inhoudlinklinks" 使用 "padding-left: 48%" 可以完美工作，而 "padding-right: 48%" 对 "inhoudlinkrechts" 没有任何作用。

我不知道如何管理从 "inhoudlinkrechts" 到其父级 div "inhoudrechts" 右边界的距离。

在左侧，它超出 div，并且仅在悬停时可见。我想在右边也一样。

希望有人能帮忙

Answer 1

我认为你应该给 inhoudrechts right-padding 并使 child div 浮动正确。并给出 child div 宽度：100%;

Answer 2

我有点把它设置为像素的更多距离。

html        
    {
        margin: 10;
        background-image: url("../images/background.png");
    }

body    
    {
        margin: 0;
        font-family: "Verdana", Geneva, sans-serif;
        color: #000000;
    }

img
    {
        width: 100%;
    }

h1
    {
        font-size: 30pt;
        font-style: bold;
        font-family: "Courier New", Courier, monospace;
        letter-spacing: 5px;
        text-shadow: 1px 2px 1px #79797B;}
    }

h2
    {
        font-size: 20pt;
        font-style: bold;
    }

h3
    {
        font-size: 16pt;
        font-style: bold;
    }

p
    {
        font-size: 12pt;
    }

/* Optie met balk*/
#header
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 1.0;
        overflow: hidden;
        border: 2px solid #FFFFFF;
        border-radius: 50px 50px 50px 50px;
        width: 750px;
        font-family: "Courier New", Courier, monospace;
        margin: 0 auto;
        text-shadow: 1px 2px 1px #FFFFFF;
    }

/* Optie zonder balk    
#header
    {
        text-align: center;
        overflow: hidden;
        color: #BEBEBE;
    }
*/
#body
    {
        text-align: center;
        overflow: hidden;
        margin: 0 auto;
    }

#footer
    {
        text-align: center;
        background-color: #BEBEBE;
        opacity: 0.4;
        overflow: hidden;
        border-top: 2px solid #FFFFFF;
        border-bottom: 2px solid #FFFFFF;
        float: bottom;
    }

.wrap
    {
        height: 600px;
        width: 100%;
        padding: 0px;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 50px;
    }   

.hoofdvak
    {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0px;
        text-align: center;
        position: relative;
    }

.linkerwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        overflow: hidden;
    }

.rechterwrap
    {
        width: 47%;
        height: 100%;
        display: inline-block;
        vertical-align: middle; 
        position: relative;
        overflow: hidden;
    }   

.inhoudlinks
    {
        border-radius: 50px 10px 10px 50px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: right;
        overflow: hidden;
    }
    .inhoudlinks:hover
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstlinks
    {
        height: 100%;
        width: 350px;
        float: left;
    }

.inhoudlinklinks
    {
        position: absolute;
        padding-left: 230px;
        padding-top: 75px;
    }

img.inhoudlinklinks
    {
        width:100%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinklinks:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

.inhoudrechts
    {
        border-radius: 10px 50px 50px 10px;
        border: 2px solid #FFFFFF;
        background-color: #BEBEBE;
        opacity: 0.6;
        padding: 10px;
        width: 350px;
        height: 95%;
        transition: all 1s;
        float: left;
        overflow: hidden;
        position: relative
    }
    .inhoudrechts:hover, .inhoudrechts:active
        {
            opacity: 1.0;
            width: 700px;
        }

.tekstrechts
    {
        height: 100%;
        width: 350px;
        float: right;
    }

.inhoudlinkrechts
    {
        position: absolute;
        width: 400px;
        right: 225px;
        float: top;
        margin: 10px;
        display: inline-block;
    }
.inhoudlinkrechts2
    {
        position: absolute;
        width: 400px;
        right: 225px;
        top: 50%;
        float: top;
        margin: 10px;
        display: inline-block;
    }

img.inhoudlinkrechts
    {
        width:60%;
        opacity: 0.5;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }
    img.inhoudlinkrechts:hover
        {
            filter: grayscale(0%);
            opacity:1;
            -webkit-filter: grayscale(0%);
            filter: none;
        }

谢谢你的帮助

无法正确镜像 div

Can't get a div mirrored properly

html

css

hover

padding