Question

我对显示内联块有一点问题，基本上我有2个div并且我想将它们放在彼此旁边，但是在第二个div之上有一个间隙叫（#store_header_text）我不知道为什么会有差距 - 我似乎无法理解这一点。

我试过删除位置：绝对和相对于它周围的其他div，但是这没有效果。

我的HTML：

<div id="store_header">

        <div id="store_header_logo">

            <a href="http://www.amazon.co.uk">
                <img class="store_header_img" src="/images/tiles/amazon.png" title="Amazon"></img>
            </a>


        </div>

        <div id="store_header_text">
            Amazon Coupons & Deals
        </div>

</div>

我的CSS：

#store_header {
    width:100%;
    border:1px solid #ccc;
    background-color:#fff;
    border-radius:3px;
    padding:5px;
}

#store_header_logo {
    height: 100px;
    width: 200px;
    position: relative;

    border:1px solid black;
    display: inline-block;


}



#store_header_logo img {
    max-height: 90px;  
    max-width: 180px; 
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A; 
    position: absolute;

    border:1px solid black;




}

#store_header_text {
    height:100px;
    width:300px;
    line-height: 90px;
    padding-left:20px;
    font-size:25px;
        font-family: 'Roboto', sans-serif;  
    font-weight:400;
    color:#004d6e;
    display: inline-block;
    border:1px solid black;


}

Answer 1

无需修改您的代码，添加

vertical-align: top;

在您的#store_header_logo ID

中

JsFiddle

Answer 2

调整了几件事。将内联块更改为内联主要

＆＃13;

>> src/workspace.ts(20,29): error TS2345: Argument of type '(msg: any) => void' is not assignable to parameter of type 'string'.

＆＃13;

#store_header {
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 3px;
  padding: 5px;
}
.store_header_logo {
  height: 100px;
  width: 200px;
  position: relative;
  border: 1px solid black;
  display: inline;
}
.store_header_logo img {
  max-height: 90px;
  max-width: 180px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
  border: 1px solid black;
}
.store_header_text {
  height: 100px;
  width: 300px;
  line-height: 90px;
  padding-left: 20px;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #004d6e;
  display: inline;
  border: 1px solid black;
}

＆＃13;

显示内联块的间隔高于第二个div

2 个答案: