Question

在此SSCCE中，有一个.wrapper div设置了display:table;，它有三个cell div，display:table-cell。

.outer-number-container是.left-cell div的孩子，但我希望它出现在.middle-cell上方，以便穿过它的中心的垂直线正好位于.middle-cell上1}};我的意思是一半应该出现/显示在.left-cell中，另一半出现在.right-cell中。

enter image description here

我试图在.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;
}

如何将一个div的子元素与`display：table-cell`重叠在另一个div上，并使用`display：table-cell？

1 个答案: