让 CSS 类以 % 的形式填充剩余的宽度。 （哈巴狗/翡翠）[重复]

Question

所以我遇到了一些问题，即我的 div 没有正确对齐，这需要非常合适。我使用 pug 作为模板。

帕格：

  body
    .container
      .header
        include game_components/header.pug
      .game-row
        include game_components/game-row.pug
      .footer
        include game_components/footer.pug

标题：

doctype html
html(lang="en")
  .logo
    span PLH
  .user-info
    span PLH

游戏行：

doctype html
html(lang="en")
  .side-bar
    span PLH
  .action-scene
    span PLH

页脚：

doctype html
html(lang="en")
  .chat
    span Chat PLH

CSS：

* {
   background-color: grey;
   border-radius: 10px;
}
.container {
    width: 80%;
    margin: 1px;
    margin: auto;
}

.header, .game-row, .footer {
    display: block;
}

.logo, .user-info, .side-bar, .action-scene, .chat {
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    margin: 0.2em;
    border:  1px solid gold;
}

.logo, .user-info {
    height: 5em;
}

.logo, .side-bar {
    width:  10%;
}

.user-info, .action-scene {
    width:  85.45%;
}

.side-bar, .action-scene {
    height: 20em;
}

.chat {
    width: 100%;
    height: 15em;
}

它目前的样子图片：http://prntscr.com/lvblcb（LightShot 链接）

如果您看一下，您会发现聊天非常适合，因为它应该。但是我在前两行很合适时遇到了麻烦。

Answer 1

您遇到的问题是由于 display:inline-block, 我有多个相同的解决方案。 您可以尝试以下任何一种： 1. 尽管 display:inline-block 使用 float:left 并给他们 90% 和 10% 这样的宽度，这将解决，是的，他们的父母不要忘记隐藏溢出。

1. 如果你想使用 display: inline-block;然后给它的父 font-size: 0;和内部跨度字体大小任意，然后为它们提供适当的宽度：

使用这个，如果您觉得有任何问题，请告诉我/