html - CSS Floats，如何将盒子相互移动？-6ren

html - CSS Floats，如何将盒子相互移动？

转载作者：行者123 更新时间：2023-11-28 08:18:02

我有一个大麻烦。我正在尝试创建一个游戏，但遇到了一个 float 元素问题。蓝色框是玩家头像，红色框是 hp 和其他统计数据，白色框是游戏中发生的事情的聊天区域。我遇到的问题是前 3 个红色框向左浮动。我希望它们彼此 float ，所以它看起来像一个垂直列而不是水平列, 但唯一的方法是让 float 框接触我的容器框的边缘。有没有办法告诉它，白框有点像边缘，它应该向下移动 1 个点，所以它会创建一个垂直列吗？谢谢。

CSS

#mainbody {
  margin: auto;
  border: 1px solid #665544;
  background-color: rgb(200, 0, 0);
  height: 850px;
  width: 960px;
}
#topbody {
  float: left;
  margin: auto;
  background-color: rgb(0, 200, 0);
  height: 400px;
  width: 960px;
}
#chatbox {
  border: 1px solid #665544;
  background-color: rgb(255, 255, 255);
  height: 300px;
  width: 350px;
  margin: 20px;
  overflow: hidden;
}
#usercontainer {
  float: left;
  border: 1px solid;
  background-color: rgb(255, 255, 255);
  height: 200px;
  width: 200px;
  margin: 20px 10px 10px 20px;
  overflow: hidden;
}
#userimage {
  background-color: rgb(0, 255, 255);
  height: 200px;
  width: 200px;
}
#userHP {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
  clear: right;
}
#userMANA {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
  clear: right;
}
#userENERGY {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
}
#enemycontainer {
  float: left;
  border: 1px solid;
  background-color: rgb(255, 255, 255);
  height: 200px;
  width: 200px;
  margin: 20px 20px 10px 10px;
  overflow: hidden;
}
#enemyimage {
  background-color: rgb(0, 255, 255);
  height: 200px;
  width: 200px;
}
#enemyHP {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
}
#enemyMANA {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
}
#enemyENERGY {
  float: left;
  border: 1px solid;
  background-color: rgb(200, 20, 50);
  height: 50px;
  width: 50px;
  margin: 5px;
}

HTML

<!DOCTYPE html>
<HTML>
  <HEAD>
    <link href="css/game.css" type="text/css" rel="stylesheet" />
  </HEAD>
  <BODY>
    <div id="mainbody">
      <div id="topbody">
        <div id="usercontainer">
          <div id="userimage">
          </div>
          <!--END OF USER IMAGE-->
        </div>
        <!--END OF USER CONTAINER-->
        <div id="userHP">
        </div>
        <div id="userMANA">
        </div>
        <div id="userENERGY">
        </div>
        <div id="chatbox">
        </div>
        <!--END OF CHAT BOX-->
        <div id="enemyHP">
        </div>
        <div id="enemyMANA">
        </div>
        <div id="enemyENERGY">
        </div>
        <div id="enemycontainer">
          <div id="enemyimage">
          </div>
          <!--END OF ENEMY IMAGE-->
        </div>
        <!--END OF ENEMY CONTAINER-->
      </div>
      <!--END OF TOP BODY-->
    </div>
    <!--END OF MAIN BODY-->
  </BODY>
</HTML>

最佳答案

您需要将三个红色框包裹在一个 float 包装器中，试试这个:

#mainbody {
        margin: auto;
        border: 1px solid #665544;
        background-color: rgb(200, 0, 0);
        height: 850px;
        width: 960px;
    }

    #topbody {
        float: left;
        margin: auto;
        background-color: rgb(0, 200, 0);
        height: 400px;
        width: 960px;
    }

    #chatbox {
        border: 1px solid #665544;
        float: left;
        background-color: rgb(255, 255, 255);
        height: 300px;
        width: 300px;
        margin: 20px;
        overflow: hidden;
    }

    #usercontainer {
        float: left;
        border: 1px solid;
        background-color: rgb(255, 255, 255);
        height: 200px;
        width: 200px;
        margin: 20px 10px 10px 20px;
        overflow: hidden;
    }

    #userimage {
        background-color: rgb(0, 255, 255);
        height: 200px;
        width: 200px;
    }

    #userHP {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
        clear: right;
    }

    #userMANA {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
        clear: right;
    }

    #userENERGY {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
    }

    #enemycontainer {
        float: left;
        border: 1px solid;
        background-color: rgb(255, 255, 255);
        height: 200px;
        width: 200px;
        margin: 20px 20px 10px 10px;
        overflow: hidden;
    }

    #enemyimage {
        background-color: rgb(0, 255, 255);
        height: 200px;
        width: 200px;
    }

    #enemyHP {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
    }

    #enemyMANA {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
    }

    #enemyENERGY {
        float: left;
        border: 1px solid;
        background-color: rgb(200, 20, 50);
        height: 50px;
        width: 50px;
        margin: 5px;
    }

    .wrapper {
        width: 65px;
        float: left;
    }

<div id="mainbody">
    <div id="topbody">

        <div id="usercontainer">
            <div id="userimage">
            </div>
            <!--END OF USER IMAGE-->
        </div>
        <!--END OF USER CONTAINER-->
        <div class="wrapper">
            <div id="userHP">
            </div>
            <div id="userMANA">
            </div>
            <div id="userENERGY">
            </div>
        </div>
        <div id="chatbox">
        </div>
        <!--END OF CHAT BOX-->

        <div class="wrapper">
            <div id="enemyHP">
            </div>
            <div id="enemyMANA">
            </div>
            <div id="enemyENERGY">
            </div>
        </div>

        <div id="enemycontainer">
            <div id="enemyimage">
            </div>
            <!--END OF ENEMY IMAGE-->
        </div>
        <!--END OF ENEMY CONTAINER-->
</div>
</div>