Question

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

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

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

Pic of the game

Answer 1

对于每个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 -->

Answer 2

<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 和< strong> javascript。 PHP 是一种语言服务器，它有多种用途，例如连接数据库或进行会话。

如何将div彼此相邻而又不向下？

2 个答案: