Есть несколько способов решения этой проблемы, просто включите несколько здесь в код ниже:
Вы можете использовать начальную загрузку для реализации системы сетки, вот справочная система начальной загрузки .
Я включил систему координат в ваш код. Для этого сначала включите загрузчик:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Что делает система сетки, так это разбивает ширину строки на 12 одинаковых столбцов, и в приведенном ниже коде левый блок занимает 5 столбцов, а правый блок занимает 5 столбцов, а центр, в который вы хотите добавить текст и материал займет 2 столбца, в общей сложности 12 столбцов. Чтобы сделать это, мы добавляем class = "col-sm-5" для 5 столбцов, например, (вы можете использовать col-lg-5 и т. Д. Вы можете найти его для более подробной информации, в основном это связано с отзывчивостью вашего страница).
Мы также можем реализовать max-width , чтобы ограничить максимальную ширину вашего центрального делителя, и использовать overflow wrap для управления переполнением. Посмотрите Переполнение CSS , чтобы увидеть, какие у вас есть варианты. Одним из них является создание эффекта прокрутки, если элементы в центре слишком велики. Таким образом, если он переполняется и толкает правую рамку вниз, вы можете сделать эффект прокрутки, чтобы правая ячейка осталась там, где она есть.
В приведенном ниже коде overflow-wrap: break-word; используется, если вы должны поместить текст посередине.
Вы также можете использовать атрибут position:absolute;, чтобы расположить правую коробку в абсолютном положении, чтобы она не была сдвинута вниз. См. положение для справки.
<!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>