如何将div彼此相邻而又不放到下面？

Question

我正试图制作一个在线游戏，并且花了很多时间试图弄清楚该怎么做（我正在使用最新的引导程序）。我提供了一张照片。在其中，您可以看到“卡”下方显示，我需要它在导航栏下方和“统计”部分的右侧显示。服务器，统计信息和卡都是div。我尝试使用fixed：left;统计资料。向左飘浮;在服务器上。该卡具有浮动：对；

仅指出导航栏以及统计信息和服务器位于php标头页面上，并且该卡在主index.php上是单独的。

[如果有人可以帮助我解决这个问题，那真是太好了，我已经花了很多时间试图弄清楚。

Pic of the game

Answer 1

A <div>占据了页面的全部，您可以在导航器的控制台上看到它。

您需要了解HTML的block和inline元素之间的区别。

[<Div>是一个块元素，<span>是一个内联元素。

我建议您阅读这篇文章：

https://www.w3schools.com/html/html_blocks.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

另一件事：如果您想更好地浏览网页，则只需学习html5，css3和javascript。 PHP是一种语言服务器，它有不同的用途，例如连接数据库或进行会话。

Answer 2

对于每个Divs，您都需要使用CSS定位它们，并将其显示模型设置为内联，请参见下文

例如，如果您有2个div，则这样；

<div class="myinlinediv" id="content">
 Div 1
</div>

<div class="myinlinediv" id="sidebar">
 Div 2
</div>

在您的CSS中，您可以放入

.myinlinediv {
 display: inline-block; /*This is the important line*/
 background-color: black;
 color: white;
 padding: 20px;
}

这是您的代码示例

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:20%; display: inline-block;" class="card m1-2 mb-2 mt-2">
<div style="height:2.5em;" class="card-header">
Servers:
</div><!-- end card-header block -->
<div><!-- start list -->
<ul class="d-flex align-items-stretch list-group list-group-flush">
<li class="list-group-item">Username</li>
<li class="list-group-item">IP</li>
<li class="list-group-item">Money</li>
<li class="list-group-item">Attacks</li>
</ul>
</div><!-- end list -->
</div><!-- end card block -->

<div style="width:20%; display: inline-block;" class="card m1-2 mb-2 mt-2">
<div style="height:2.5em;" class="card-header">
Stats
</div> <!-- end card header -->
<div><!-- start list -->
<ul class="d-flex align-items-stretch list-group list-group-flush">
<li class="list-group-item">Username</li>
<li class="list-group-item">IP</li>
<li class="list-group-item">Money</li>
<li class="list-group-item">Attacks</li>
</ul>
</div><!-- end list -->
</div><!-- end card block -->


<div style=" width: 50%; margin-top:10px; display: inline-block;" class="card">
<div class="card-body">
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
</div><!-- end card body block -->
</div><!-- end div card block -->