div 顶部有空的 space 和 display:inline 块
div has empty space on top with display:inline-block
我正在尝试将两个 div .cardbox
、.previewbox
放在容器 .cardcontainer
中并排放置 display:inline-block;
出于某种原因.previewbox
右侧的 div 上面有一些空的 space,我不知道如何摆脱它。 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>
您需要做的是将它们放在顶部 vertical-align
。
在 .previewbox
和 .cardbox
上使用它:
vertical-align:top;
您已为“.cardcontainer”指定了固定高度。 “.previewbox”固定在其容器的底部。
我建议摆脱这个固定高度,否则你可以做
vertical-align: top
在cardbox
cssclass
中添加float: left
.cardbox {
height: 630px;
width: 895px;
display: inline-block;
overflow: auto;
border-radius: 3px;
border: 1px solid black;
float: left;
}
添加此 属性 也将对您有所帮助:
.cardbox {
float: left;
}
.previewbox {
float: left;
}
只需将 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>
我正在尝试将两个 div .cardbox
、.previewbox
放在容器 .cardcontainer
中并排放置 display:inline-block;
出于某种原因.previewbox
右侧的 div 上面有一些空的 space,我不知道如何摆脱它。 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>
您需要做的是将它们放在顶部 vertical-align
。
在 .previewbox
和 .cardbox
上使用它:
vertical-align:top;
您已为“.cardcontainer”指定了固定高度。 “.previewbox”固定在其容器的底部。 我建议摆脱这个固定高度,否则你可以做
vertical-align: top
在cardbox
cssclass
float: left
.cardbox {
height: 630px;
width: 895px;
display: inline-block;
overflow: auto;
border-radius: 3px;
border: 1px solid black;
float: left;
}
添加此 属性 也将对您有所帮助:
.cardbox {
float: left;
}
.previewbox {
float: left;
}
只需将 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>