Question

我正在我的主页上工作，我正在尝试两个获得3列的标题。第一列应该是徽标，第二列是导航菜单，第三列是语言切换器。

导航和郎。切换器应该向右对齐并具有自动宽度（因此只有内容所需的宽度）。 img应该浮动到左侧，并应填充空宽度（！但不大于img宽度的100％和最大高度！）

如果浏览器宽度变小，则应缩小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

我想我现在明白了。我将您的布局更改为与

的表格类似

dislpay:table

代表#top-header .frame

和dislpay:table-cell

用于徽标和菜单

这是固定的jsFiddle

如何在多列布局中制作图像填充宽度？

1 个答案: