如何将两个<divs>始终并排放置

Question

我有以下HTML:

<div class="block-content table">
   <div class="row" style="height: 5rem">
      <div class="cell" id="logo">xxx</div>
      <div class="cell" id="navigation">
         xxxxx
      </div>
   </div>
</div>

显示全宽时,徽标显示在左侧,导航显示在右侧.但是,当我减小浏览器宽度时,导航将移动到徽标下方.

.cell {
  display: table-cell;
}
.row {
  display: table-row;
}
.table {
  display: table;
}

#header-view .top-page .block-content {
  bottom: 1rem;
  left: 1rem;
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
#header-view .top-page .block-content #logo {
  height: 5rem;
  width: 20rem;
  margin-right: 2rem;
  text-align: center;
  line-height: 5rem;
}
#header-view .top-page .block-content #navigation {
  height: 5rem;
  text-align: left;
  line-height: 5rem;
  margin-left: 2rem;
  width: 40rem;
}

如何确保徽标和导航始终并排显示？注意我确实尝试将#logo和#navigation设为"display:inline-block",但这似乎没有帮助,所以我尝试使用css表但它仍然无效.

Answer 1

请检查一下:

http://jsfiddle.net/SQ9Hf/2/

你需要放一些float,最好的办法就是把每个div放宽%.