如何并排对齐3个div，1个向左，1个居中，1个向右？

Question

这将是一个导航栏，页面顶部，固定。 与此相关的部分 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 :(

谢谢您的帮助！

Answer 1

将 #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>

Answer 2

这里还有 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>

Answer 3

添加以下课程可能会有所帮助

.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