Question

我的网页位于此网址http://www.hollox.net。

这是一个简单的页面，可以测试需要包含重叠图片的特定菜单的客户。

定位是相对的。

我有两个系列的3张图片重叠：

enter image description here

是否有一个CSS标签可以删除两个div容器系列之间的空间，还是我必须操纵top属性？

white space

这里是源代码：

<html>
    <head>
        <title>test pour Patrick</title>
        <style type="text/css">

            .container
            {
                width: 800px;
                height: 400px;
                border: solid 5px yellow;
                text-align: center;
                overflow: hidden;
            }
            .table
            {
                position:relative;
                display: inline-table;
                width: 310px;
            }

            .row
            {
                position:relative;
                display: table-row;
            }

            .cell
            {
                position:relative;
                width: 100px;
                height: 100px;
                border: solid 1px black;
                display: table-cell;
            }

            .p
            {
                background-color: Gray;
                position:relative;
                float: left;
                clear: none;
                z-index: 1;
            }

            .x
            {
                background-color: Blue;
                position:relative;
                float: left;
                clear: none;
                z-index: 2;
                /* 100px x 3 = 300px */
                /* hardcoded value */
                top: -80px;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="table">
                <div class="row">
                    <div class="cell p"><img src="./images/p.png" /></div>
                    <div class="cell p"><img src="./images/p.png" /></div>
                    <div class="cell p"><img src="./images/p.png" /></div>
                    <div class="cell x"><img src="./images/x.png" /></div>
                    <div class="cell x"><img src="./images/x.png" /></div>
                    <div class="cell x"><img src="./images/x.png" /></div>
                </div>
                <div class="row">
                    <div class="cell p">A<img src="./images/p.png" /></div>
                    <div class="cell p">B<img src="./images/p.png" /></div>
                    <div class="cell p">C<img src="./images/p.png" /></div>
                    <div class="cell x">1<img src="./images/x.png" /></div>
                    <div class="cell x">2<img src="./images/x.png" /></div>
                    <div class="cell x">3<img src="./images/x.png" /></div>
                </div>
            </div>
        </div>
    </body>
</html>

谢谢你，祝你有美好的一天！塞巴斯蒂安

Answer 1

像这样编辑x类：

.x {
background-color: #00F;
position: relative;
float: left;
clear: none;
z-index: 2;
margin-top: -80px;

使用margin-top: -80px;代替top:-80px;

CSS - 删除垂直间距

1 个答案: