html - Div 填充 wrapper 和边距的垂直空间

Question

我正在尝试创建两个 div，一个位于左侧，width 为 49%，然后是 2% margin，然后是另一个 div 也为 49% width。但是我在垂直空间以及 margin 方面遇到了问题。

---

演示

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        margin-top:0;
        margin-right: 2%;
        background-color: pink;
}
.Footer-firstElementRight {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        padding: 0;
        background-color: gold;
}

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

这是一段代码:https://jsfiddle.net/L6k5ocyr/3/

我想我遗漏了什么，知道吗？

Answer 1

.Footer-firstElement {
        font-size: 0;
        line-height: 0;
        height: 200px;
        background-color: tomato;
 }
        
.Footer-firstElementLeft {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        margin-top:0;
        margin-right: 2%;
        background-color: pink;
        float:left;  /* edited */
        
}
.Footer-firstElementRight {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        width: 49%;
        height: 100%;
        padding: 0;
        background-color: gold;
}

<div class="Footer-firstElement">
  <div class="Footer-firstElementLeft">
    <a href="#">Foo bar </a>
  </div>
  <div class="Footer-firstElementRight">
    Foo bar <br />
    Foo bar
  </div>
</div>

试试这个:

.Footer-firstElementLeft {
     float: left;
}