[英]How to align 3 divs side by side, with 1 to left, 1 to center and 1 to the right?
這將是一個導航欄,頁面頂部,固定。 與此相關的部分 HTML 代碼:
<nav>
<div id="chameleon"><a href="#"><img src="img/chameleon.png"></a></div>
<div id="menulogo">
<center><img src="img/champic_text.png" size="80%"; align="middle"></center>
</div>
<div id="menustripes" onclick="showmenu()"><a href="#"><img src="img/menu.png"></a></div>
</nav>
所以我想左對齊變色龍 div,居中 menulogo div 並右對齊 menustripes div。 我嘗試了很多解決方案,但我無法在數學上對齊 menulogo div :(
謝謝您的幫助!
將 #menulogo div 移動到導航中的最后一個 div,將 #chameleon 向左浮動,#menustripes 向右浮動,並將導航的 text-align 設置為居中:
nav { text-align: center; } #menustripes { float: right; } #chameleon { float: left; }
<nav> <div id="chameleon"> <a href="#"> <img src="img/chameleon.png"></a> </div> <div id="menustripes" onclick="showmenu()"> <a href="#"> <img src="img/menu.png"></a> </div> <div id="menulogo"> <img src="img/champic_text.png" size="80%" ; align="middle"> </div> </nav>
或者保持現有順序的元素並使用 flexbox:
nav { display: flex; justify-content: space-between; }
<nav> <div id="chameleon"> <a href="#"> <img src="img/chameleon.png"> </a> </div> <div id="menulogo"> <img src="img/champic_text.png" size="80%" ; align="middle"> </div> <div id="menustripes" onclick="showmenu()"> <a href="#"> <img src="img/menu.png"> </a> </div> </nav>
這里還有 2 種方法(適用於舊瀏覽器),但我推薦j08691的flex
版本
使用display: table
nav { display: table; width: 100%; } nav > * { display: table-cell; width: 33.33%; text-align: center; } nav > *:nth-child(1) { text-align: left; } nav > *:nth-child(3) { text-align: right; }
<nav> <div id="chameleon"> <a href="#"> <img src="img/chameleon.png"></a> </div> <div id="menustripes" onclick="showmenu()"> <a href="#"> <img src="img/menu.png"></a> </div> <div id="menulogo"> <img src="img/champic_text.png" size="80%" align="middle"> </div> </nav>
使用display: inline-block
nav > * { display: inline-block; width: 33%; text-align: center; } nav > *:nth-child(1) { text-align: left; } nav > *:nth-child(3) { text-align: right; }
<nav> <div id="chameleon"> <a href="#"> <img src="img/chameleon.png"></a> </div><!-- --><div id="menustripes" onclick="showmenu()"> <a href="#"> <img src="img/menu.png"></a> </div><!-- --><div id="menulogo"> <img src="img/champic_text.png" size="80%" ; align="middle"> </div> </nav>
添加以下課程可能會有所幫助
.grid {
display: inline-block;
width: 30%; <-- Change accordingly
margin: 0;
padding: 3.33%;
vertical-align: top;
}
編輯
You can make three different class/id for all three divs
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.