div上面有空格,显示:inline-block

时间:2015-03-03 12:10:15

标签: html css screen-positioning

我试图将两个div .cardbox.previewbox放在彼此相邻的容器.cardcontainerdisplay:inline-block;由于某种原因,右边的div side .previewbox在它上面有一些空的空间,我不知道如何摆脱它。两个div都包含图像。我试图修改宽度和高度设置,认为它们对于盒子来说太大了,但似乎没有什么能让它正确。非常感谢任何帮助或投入。



.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}

        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

您需要做的是使用vertical-align将它们置于顶部。

.previewbox.cardbox

上使用此功能
vertical-align:top;

答案 1 :(得分:2)

只需将position: absolute添加到.previewbox

即可

&#13;
&#13;
.cardcontainer {
    margin:auto;
    width:1260px;
    height:630px;
    border-radius: 3px;
    background-color:white;
    background-image: url("images/program/cardbox.jpg");
    background-repeat:no-repeat;
    background-size:100%;
    overflow:auto;
}
.cardbox {
    height:630px;
    width:895px;
    display:inline-block;
    overflow:auto;
    border-radius:3px;
    border: 1px solid black;
}
.previewbox {
  position:absolute;
    height:605px;
    width:340px;
    display:inline-block;
    border-radius:3px;
    border:1px solid black;
}
.card {
    border: 4px solid white;
    width:141px;
    height:200px;
    border-radius: 3px;
    display:inline-block;
}
.cardpreview {
    width:300px;
    height:446px;
}
&#13;
        <div class="cardcontainer">
            <div class="cardbox">
                <img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" 
                /><img class="card" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div
            ><div class="previewbox"
                  ><img class="cardpreview" alt="card missing" src="http://mtgimage.com/card/cardback.jpg" />
            </div>
        </div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您已经提供了&#34; .cardcontainer&#34;固定的高度。 &#34; .previewbox&#34;固定在容器的底部。 我建议摆脱这个固定的高度,否则你可以做到

vertical-align: top

答案 3 :(得分:0)

float: left css类

中添加cardbox
.cardbox {
    height: 630px;
    width: 895px;
    display: inline-block;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid black;
    float: left;
}

答案 4 :(得分:0)

添加此属性也可以帮助您:

.cardbox {   
    float: left;
}
.previewbox {   
    float: left;
}