CSS - 如何将一个div放在另一个div的右侧？

Question

CSS - 如何将一个div放在另一个div的右侧？

6

<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包含一个动态创建的表格，第二个div是静态的。

我尝试使用

.main-div {
    float: left;
}

但是 div 元素仍然堆叠在彼此下方。

当然，我没有忘记在 HTML 中引入 CSS 文件 :)

我该如何解决呢？

谢谢！

- user3364652

div元素？不，它们没有。第一个有动态内容。 - user3364652

似乎对我有效：http://jsfiddle.net/davidThomas/k3zo353q/（尽管我不得不给`border`和`min-height`以使`<table>`可见）。 - David Thomas

1

@user3364652 在你的表格中添加一些内容，它就会工作了 - http://jsfiddle.net/vfnja2Lx/ - Anonymous

@user3364652 如果您拥有不同的HTML和CSS代码，请在帖子中发布相关代码。 - Anonymous

1

原始的float:left解决方案是有效的。我认为我的浏览器在每次HTML更改后没有很好地刷新。谢谢你的帮助！ - user3364652

显示剩余3条评论

2个回答

2

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

.main-div div {
    float: left;
}

请查看这个JSFiddle:

http://jsfiddle.net/Lqe7ug1L/

注意，根据您现在编写的HTML，"Waiting for"文本不会出现在它们上面。您需要将其包装在单独的元素中，以便它出现在div上方（我假设这是您想要的效果）。

- Ryan

我认为他想要包含<table>的<div>在带有“等待中...”消息的<div>旁边。 - David Thomas

是的。表格应该在一个 div 中，玩家信息应该在另一个 div 中，位于表格 div 的右侧。 - user3364652

啊，明白了。我更新了Fiddle并为表格添加了内容。现在它是这样显示的：http://jsfiddle.net/Lqe7ug1L/1/。不确定为什么对你来说还是显示不正确，float: left应该能满足你的需求。 - Ryan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scimonster · Accepted Answer

您需要设置它们的宽度，否则它们将会填满整个100%。

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