两个如何在 multi-column 布局中制作 img 填充宽度？

Question

我正在处理我的主页，我正在尝试两个 header 包含 3 列。第一列应该是徽标，第二列是导航菜单，第三列是语言切换器。

导航和语言。切换器应右对齐并具有自动宽度（因此只有内容所需的宽度）。 img 应该向左浮动并填充空白宽度（！但不能大于 img 宽度的 100% 并且 max-height！）

如果浏览器宽度变小，img 应该缩小，但正确的内容应该是相同的大小。

.frame {
  max-width: 90%;
  height: 75px;
  margin: 0 auto;
}
img {
  max-width: 100%;
  height: auto;
}
#top-header {
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 100;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #CCC;
}
#top-header .frame {
  position: relative;
  top: 10px;
}
#top-header .frame div {
  white-space: nowrap;
}
#top-header .frame > div,
nav {
  float: right;
}
#top-header .frame > div:first-child {
  float: left;
  max-width: 60%;
}
#mainmenu {
  position: relative;
  top: 25px;
}
#mainmenu .moduletable {
  display: block;
  position: static;
}
#mainmenu ul.nav.menu {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#mainmenu ul.nav.menu li {
  font-size: .92rem;
  -ms-flex: 1 1 auto;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  position: relative;
}
#mainmenu ul.nav.menu li a {
  display: block;
  margin: 10px;
}

<body>
  <header id="top-header">
    <div class="frame">
      <div id="logo">
        <div class="moduletable">
          <div class="custom">
            <p>
              <img alt="logo" src="http://lorempixel.com/1637/100">
            </p>
          </div>
        </div>
      </div>
      <div id="language-switcher"></div>
      <nav id="mainmenu">
        <div class="moduletable">
          <ul class="nav menu">
            <li class="item-101 current active"> <a href="/home">Home</a>

            </li>
            <li class="item-102 deeper parent"> <a href="/about-us">About us</a>

            </li>
            <li class="item-103"> <a href="#">XXXXXXXX</a>

            </li>
            <li class="item-104"> <a href="#">XXXXXX</a>

            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
</body>

这是我目前在 jsFiddle

尝试的示例

谢谢，祝你有愉快的一天:)

Answer 1

我想我现在明白了。我将您的布局更改为类似于 table 和

dislpay:table

为 #top-header .frame

和dislpay:table-cell

徽标和菜单

这里是固定的jsFiddle

两个如何在 multi-column 布局中制作 img 填充宽度？

How two make an img fill width in multi-column layout?

html

css

image

floating

multiple-columns