Question

<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文件：）

我该如何解决？

感谢!!!

Answer 1

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

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

Answer 2

你的浮动左边应该在主div的子div上：

.main-div div {
    float: left;
}

看看这个JSFiddle：

http://jsfiddle.net/Lqe7ug1L/

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

CSS - 如何将div放到另一个div？

2 个答案: