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放置一个％宽度。

Answer 2

使用CSS表会起作用，但问题是你已经设置了rem的宽度，这与字体大小有关。如果您以百分比形式设置它们并调整值，则div将始终是父级宽度的一定比例，并将随页面调整大小。确保也设置父级的宽度，例如：width: 100%

如何将两个<divs>定位为始终并排</divs>

2 个答案: