1

I have a web page located at this URL http://www.hollox.net.

This is a simple page to test for a customer that need a specific menu containing pictures overlapping.

The positioning is relative.

I have two series of 3 pictures that are overlapping:

enter image description here enter image description here

Is there a CSS tag that will remove space between the two series of div containers or do I have to manipulate the top property?

white space

Here the source code:

<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>

Thank you, Have a great day! Sébastien

4

1 回答 1

2

像这样编辑x类：

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

margin-top: -80px;改为使用top:-80px;

于 2013-09-17T15:25:52.883 回答