时间戳

首页 > 解决方案 > 将 2 个 div 放在相对的两侧

html - 将 2 个 div 放在相对的两侧

问题描述

试图将一个 div 放在右侧，另一个放在左侧。我有 1 个 div，里面有 2 个 div。

float: right到父 div 和文本/图像。

<div class="navigation">       

    <div class="left">      
        <img src="Logo.png" id="logoImage">
        <h1>TWITCHBOOK</h1>     
    </div>  

    <div class="right">
        <h3>Luka Crypto</h3>      
        <div id="circle"></div>
    </div>

</div>

Codepen： https ://codepen.io/Cryptooo/pen/rXGdoP

对面的两个 div。

标签： htmlcss

解决方案

您可以通过将样式.navigation设置为 flexbox来实现这一点justify-content: space-between;：

.navigation {
  display: flex;
  justify-content: space-between;
}

.left {
  background: red;
}

.right {
  background: blue;
}
<div class="navigation">
  <div class="left">
    <img src="Logo.png" id="logoImage">
    <h1>TWITCHBOOK</h1>
  </div>

  <div class="right">
    <h3>Luka Crypto</h3>
    <div id="circle"></div>
  </div>
</div>

推荐阅读