兩個人如何在多列布局中創建img填充寬度？

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

兩個人如何在多列布局中創建img填充寬度？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-01-20 13:11:23

兩個人如何在多列布局中創建img填充寬度？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-01-20 13:11:23

解決方案1
0 已采納 2015-01-20 13:11:23