1

この URL http://www.hollox.netに Web ページがあります。

これは、写真が重なっている特定のメニューを必要とする顧客向けにテストするための簡単なページです。

位置は相対的です。

重複している 3 つの写真の 2 つのシリーズがあります。

ここに画像の説明を入力 ここに画像の説明を入力

2 つの一連の div コンテナー間のスペースを削除する CSS タグはありますか、それとも top プロパティを操作する必要がありますか?

余白

ソースコードは次のとおりです。

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

ありがとう、良い一日を！セバスチャン

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 に答える