我设置了两个框，我想在中间放置一些按钮和文本，但是每当我尝试在其中添加文本时，它都会使最右边的框落下一个。我希望他们保持一致。
我尝试在2个框之间添加另一个，但这没有用。我是html的新用户，所以我不确定如何设置格式。
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li><a href="GameMainWindow.html">Home</a></li>
<li><a href="SkillTree.html">SkillTree</a></li>
<li><a href="Equipment.html">Equipment</a></li>
<li><a href="Pets.html">Pets</a></li>
<li><a href="Skills.html" id="onlink">Skills</a></li>
<li><a href="Quests.html">Quests</a></li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 300px; float:left; border: 15px solid green; height:300px; background:white; margin:10px">
Inventory
<br />
Bronze: <span id="Bronze">0</span>
<br />
Silver: <span id="Bronze">0</span>
<br />
Gold: <span id="Bronze">0</span>
<br />
Diamond: <span id="Bronze">0</span>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px">
Skills
<br />
Strength: Lv <span id="Strengthlv">1</span> <span id="StrengthCexp">0</span> / <span id="StrengthMexp">100</span>
<br />
Magic: Lv <span id="Magiclv">1</span> <span
id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
我希望我要在这两个框中间放置的按钮/单词不会破坏对齐方式。但是我的实际输出是单词和按钮将最右边的框向下移动。
答案 0 :(得分：1)
有多种方法可以解决此问题，只需在下面的代码中添加一些方法即可：
您可以使用引导程序来实现网格系统，这是bootstrap grid system参考。
我已将网格系统包含在您的代码中。为此，首先要包括引导程序：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
网格系统的作用是将行的宽度分成12个相等的列，在下面的代码中，左边的框占据5列，右边的框占据5列，中间是要添加文本的位置内容将占用2列，总计12列。为此，我们为5列添加class =“ col-sm-5”，（您可以使用col-lg-5等。您可以查找它以获取更多详细信息，基本上这与您的响应能力有关页）。
我们还可以实现max-width来限制中心div的最大宽度，并使用overflow wrap来控制溢出。查找CSS overflow，以了解您的选择。其中之一是，如果中间的元素太大，则会产生滚动效果。这样，如果溢出，将右框推到底部，您可以进行滚动效果，以使右框保持原样。
如果要将文本放在中间，请使用overflow-wrap: break-word;下面的代码。
您还可以利用position:absolute;属性将右框定位在绝对位置，这样就不会将其按下。请参阅position以供参考。
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="nav_bar">
<ul>
<li>
<a href="GameMainWindow.html">Home</a>
</li>
<li>
<a href="SkillTree.html">SkillTree</a>
</li>
<li>
<a href="Equipment.html">Equipment</a>
</li>
<li>
<a href="Pets.html">Pets</a>
</li>
<li>
<a href="Skills.html" id="onlink">Skills</a>
</li>
<li>
<a href="Quests.html">Quests</a>
</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="float:left; border: 15px solid green; height:300px; background:white; margin:10px" class="col-sm-5">
Inventory
<br />Bronze:
<span id="Bronze">0</span>
<br />Silver:
<span id="Bronze">0</span>
<br />Gold:
<span id="Bronze">0</span>
<br />Diamond:
<span id="Bronze">0</span>
</div>
<div style="max-width: 30px; overflow-wrap: break-word;" class="col-sm-2">
<h1>lkjdlfkjdlkfjdljfdlkjfdlkjfd</h1>
</div>
<div style="width: 300px; float:right; border: 15px solid green; height:300px; background:white; margin:10px;" class="col-sm-5">
Skills
<br />Strength: Lv
<span id="Strengthlv">1</span>
<span id="StrengthCexp">0</span> /
<span id="StrengthMexp">100</span>
<br />Magic: Lv
<span id="Magiclv">1</span>
<span
id="MagicCexp">0</span> /
<span id="MagicMexp">100</span>
<br />
<button onclick="Magicexp()">Click Me!</button>
<br />
</div>
</div>
</div>
<script type="text/javascript" src="Skills.js"></script>
</body>
</html>
</p>
</div>
</body>
</html>
答案 1 :(得分：1)
我在您的代码中添加了一个flexbox。我希望这可以帮到你。
pyinstaller --onefile --windowed my_module.mymain
pyinstaller --onefile --windowed my_module.mymain.py
pyinstaller --onefile --windowed mymain
pyinstaller --onefile --windowed mymain.py