0

我正在尝试将两个 div放置在彼此相邻的容器中.cardbox，由于某种原因，右侧的 div顶部有一些空白空间，我不知道如何摆脱。两个 div 都包含图像。我尝试过修改宽度和高度设置，认为它们对于盒子来说太大了，但似乎没有什么能做对。非常感谢任何帮助或投入。.previewbox.cardcontainerdisplay:inline-block;.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 {
    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>

4

5 回答 5

3

只需添加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;
}
        <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>

于 2015-03-03T12:17:35.063 回答
2

您需要做的是用 . 将它们放在顶部vertical-align。

.previewbox在和上使用它.cardbox：

vertical-align:top;
于 2015-03-03T12:13:33.427 回答
0

添加此属性也将帮助您：

.cardbox {   
    float: left;
}
.previewbox {   
    float: left;
}
于 2015-03-03T12:17:07.610 回答
0

你给你的“.cardcontainer”一个固定的高度。“.previewbox”固定在其容器的底部。我建议摆脱这个固定的高度，否则你可以这样做

vertical-align: top
于 2015-03-03T12:15:24.993 回答
0

float: left在cardboxcss类中添加

.cardbox {
    height: 630px;
    width: 895px;
    display: inline-block;
    overflow: auto;
    border-radius: 3px;
    border: 1px solid black;
    float: left;
}
于 2015-03-03T12:15:26.300 回答