如何並排排列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> 

所以，我要左對齊變色龍格，居中menulogo股利和右對齊的menustripes股利。 我已經嘗試了很多解決方案，但我不能對齊數學中心的menulogo格:(

感謝您的幫助！

Answer 1

移動的#menulogo DIV是最後一個div的導航，浮動#chameleon左，右#menustripes和導航的文本對齊設置爲中心：

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

添加下面的類可以幫助

.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 

Answer 3

這裏有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>