我试图将两个div .cardbox
,.previewbox
放在彼此相邻的容器.cardcontainer
中display: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;
答案 0 :(得分:2)
您需要做的是使用vertical-align
将它们置于顶部。
在.previewbox
和.cardbox
:
vertical-align:top;
答案 1 :(得分:2)
只需将position: absolute
添加到.previewbox
.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;
答案 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;
}