CSS - 如何将 div 放在另一个 div 上？答案

【问题标题】：CSS - how to put div right to another div?CSS - 如何将 div 放在另一个 div 上？
【发布时间】：2014-09-21 19:57:45
【问题描述】：

<body>
        <div class="main-div">
            <table id="gameboard-table"></table>
        </div>
        <div class="main-div">
            Waiting for X players to join
            <div> Player 1 - </div>
            <div> Player 2 - </div>
            <div> Player 3 - </div>
            <div> Player 4 - </div>
        </div>
</body>

第一个 div 有一个动态创建的表，第二个是静态的。

我试过了

.main-div {
    float: left;
}

但 div 仍然是一个在另一个之下。

我当然没有忘记在 html 中包含 CSS 文件 :)

我该如何解决？

谢谢！！！

【问题讨论】：

它们有固定尺寸吗？
div？不，他们没有。第一个具有动态内容。
似乎对我有用：jsfiddle.net/davidThomas/k3zo353q（尽管我必须提供 border 和 min-height 才能使 <table> 可见）。
@user3364652 将一些内容放入您的表格中，然后它将起作用 - jsfiddle.net/vfnja2Lx
使用 float:left 的原始解决方案有效。我认为每次 html 更改后我的浏览器都没有很好地刷新。感谢您的帮助！

标签： html css alignment

【解决方案1】：

您需要设置它们的宽度，否则它们只会填充到 100%。

.main-div {
    float: left;
    width: 50%;
}

【讨论】：

尝试 49%，有时边距或边框会搞砸。
还是一样。我尝试将两个 div 放在另一个 div 中，结果仍然相同。

【解决方案2】：

你的 float-left 应该在 main-div 的子 div 上：

.main-div div {
    float: left;
}

查看这个 JSFiddle：

http://jsfiddle.net/Lqe7ug1L/

请注意，现在编写 HTML 的方式，“等待”文本不会出现在它们上方。您需要将其包装在一个单独的元素中，以便它出现在 div 的上方（我假设这就是您所追求的效果）。

【讨论】：

我认为他希望 <table> 包含 <div> 旁边的 <div> 并带有“等待...”消息。
是的。桌子应该在一个 div 中，玩家信息应该在另一个 div 中，就在桌子的 div 中。
啊，明白了。我更新了 Fiddle 并为表格添加了内容。现在就是这样：jsfiddle.net/Lqe7ug1L/1。不知道为什么它仍然为您显示不正确，float: left 应该可以满足您的需求。