html - 如何用`display :table-cell` over another div with `display:table-cell?` 重叠一个div的子元素

Question

JSFiddle

在这个 SSCCE 中，有一个 .wrapper div 和 display:table; 集，它有三个 cell div 和 显示:表格单元格。

.outer-number-container 是 .left-cell div 的子元素，但我希望它出现在 .middle-cell 之上 这样一条穿过它中心的垂直线就正好在 .middle-cell 上；我的意思是 它的一半应该出现/显示在 .left-cell 中，另一半应该出现/显示在 .right-cell 中。/p>

我曾尝试在 .right-cell 上使用负边距来执行此操作，但这似乎不起作用。那么我该如何实现呢？

HTML:

        <div class="left-cell cell" align="left">
            <div class="step-container">
                <div class="content-box">
                        <div class="content-image" style="background-image: url(http://simeonhookphotography.com/wp-content/gallery/favorites/norway-countryside-to-bergen.jpg);"></div>
                        <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                    </div>


                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="right-face-notch notch"></div>
                    </div>
                </div>


                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>
            </div>
        </div>




        <div class="middle-cell cell"></div>




        <div class="right-cell cell" align="right" >
            <div class="step-container">
                <div class="number-outer-container">
                    <div class="number-inner-container">
                        <div class="number-banner"></div>
                    </div>
                </div>

                <div class="notch-outer-container">
                    <div class="notch-inner-container">
                        <div class="left-face-notch notch"></div>
                    </div>
                </div>

                <div class="content-box">
                    <div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                    <div class="content-image" style="background-image:url(http://www.penttila-gardens.com/activities/walking/countryside/images/02-harvest.jpg)">
                    </div>
                </div>

            </div>
         </div>


    </div>

CSS:

.wrapper {
    height:100%;
    width: 95%;
    margin: 10px auto;
    display: table;
    background-color:teal;
}

.cell {
    display:table-cell;
    vertical-align: top;
}

.left-cell {
    width:50%
}

.middle-cell {
    height:100%;
    background-color: white;
    width:1.5px;
    font-size: 0;
    box-shadow: 0px 50px 10px black;
    -moz-box-shadow: 0px 50px 10px black;
    -webkit-box-shadow: 0px 50px 10px black;
}

.right-cell {
   /* width:50%*/ /*Commenting b/c both right and left 50, 50 squish and vanish the middle between them*/
    background-color: blueviolet
}



.step-container {
    max-height: 200px;
    font-size: 0;
}



.content-box {
    display: inline-block;
    width: 250px;
    height: 200px;
    /*border: 5px solid blue;*/
    font-size: 0;
}

.content-box .content-image {
    width:35%;
    height:100%;
    background-size: cover;
    display: inline-block
}

.content-box .content-text {
    background-color: rgb(255, 255, 255);  
    color: #1c1a1a;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 100;
    overflow:auto;
    display: inline-block;
    width:65%;
    height:100%;
}

.notch-outer-container {
    display:inline-block;
}

.left-cell .notch-outer-container {
    margin-right: 10px;
}

.right-cell .notch-outer-container {
    margin-left: 10px;
}

.notch-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.notch {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.right-face-notch {
    border-left: 15px solid brown;
}

.left-face-notch {
    border-right: 15px solid brown;
}

.number-outer-container {
    display:inline-block;
}

.number-inner-container {
    height:200px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.number-banner {
    width:30px;
    height:30px;
    background-color:crimson;
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px;
}

.right-cell .number-outer-container {
    display: none;
}

Answer 1

在你的情况下，我用绝对位置管理这一点:

.number-inner-container {
    position:relative;
}

.number-banner {
    position:absolute;
    left:-13px;
    top:50%;
    margin-top:-15px;
}