html - 无法正确镜像 div

Question

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

.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 并使子 div 向右浮动。并给 child div 宽度:100%；