CSS Floats，如何将盒子移到另一个下面？

时间：2015-03-06 03:18:08

标签： html css

我遇到了很大的麻烦。我试图创建一个游戏但遇到浮动元素问题。蓝色方框是玩家头像，红色方框将是hp和其他统计数据，白色方框是游戏中正在进行的聊天区域。我遇到的问题是前三个红色框向左浮动。我希望它们在彼此之下漂浮，因此它看起来像一个垂直柱而不是一个水平柱，但唯一的方法是让浮动盒子触及我的容器盒边缘。有没有办法对它说，白盒有点像边缘，它应该向下移动1点，这样它会创建一个垂直列？谢谢。

CSS

＆＃13;
＆＃13; 
#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;
}
＆＃13;
＆＃13;
＆＃13;

HTML     

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你需要在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>

相关问题
最新问题