并排显示2个div，同样填充可用宽度

Question

我想显示2个div，并排，同样填充可用宽度。问题是当我将每个设置为50％时，它们最终会垂直堆叠。将其中一个设置为49％可以修复它，但这感觉就像一个疯狂。有更好的方法吗？

#red {
    display:inline-block;
    background-color:red;
    width:50%;
}

#green {
    display:inline-block;
    background-color:green;
    width:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="panel panel-default sc-panel">
        <div class="panel-heading">My Panel</div>
        <div class="panel-body" style="padding:0">
                <div id="red">red</div>
                <div id="green">green</div>
        </div>
    </div

- 编辑 -

是的，这是一个重复的问题。只是我的意见，但我不喜欢以前的答案：（1）将font-size设置为零，（2）将html代码放在同一行，可能使其不太可读

Answer 1

内联元素对代码中的空白区域很敏感，因此只需删除它：

＆＃13;

＆＃13;

#red {
  display: inline-block;
  background-color: red;
  width: 50%;
}

#green {
  display: inline-block;
  background-color: green;
  width: 50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="panel panel-default sc-panel">
  <div class="panel-heading">My Panel</div>
  <div class="panel-body" style="padding:0">
    <div id="red">red</div><div id="green">green</div>
  </div>
  </div

＆＃13;

＆＃13;

＆＃13;

Answer 2

浮动第一个div治愈这个，虽然老实说，我不确定为什么！除了浏览器怪癖之外，我看不出任何理由 - 为什么你的代码不能正常工作。

#red {
    display:inline-block;
    background-color:red;
    width:50%;
    float: left;
}

#green {
    display:inline-block;
    background-color:green;
    width:50%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="panel panel-default sc-panel">
        <div class="panel-heading">My Panel</div>
        <div class="panel-body" style="padding:0">
                <div id="red">red</div>
                <div id="green">green</div>
        </div>
    </div