0
J'ai essayé de trouver le problème, mais je n'ai pas pu le faire, car cela semble un peu compliqué.Déménagement de la table sous l'image à côté
Comme vous pouvez le voir dans l'extrait, la première table déclare le poids de la div avec l'img et si la deuxième table à côté de l'image, a un poids supérieur à celui de la première. Je voudrais savoir une solution «propre», si l'utilisation de flotteur comme ceci est faux, etc., car je pourrais juste placer un plus grand poids statique de la première table et cela résoudrait le problème entier. (Je viens de modifier le texte « profession: » à « prof », car elle réduit le poids de la table et provoque le problème à apparaître)
#gameContainer {
\t margin-top: 20px;
}
#character {
\t text-align: center;
\t font-size: 18px;
}
#gameTitle {
\t font-family: GameFont;
\t font-size: 70px;
\t margin-bottom: 50px;
\t text-align: center;
}
#attributes td {
\t padding-left: 10px;
}
#explore {
\t margin-top: 45px;
\t text-align: center;
}
.bttn:hover {
\t cursor: pointer;
}
.bttn {
\t box-shadow: 0.5px 0.5px 3px black;
\t width: 24px;
}
#lvl {
\t margin-top: 30px;
}
#start {
\t margin-top: 45px;
}
#Log {
\t text-align: center;
\t margin-left: 5%;
\t margin-right: 5%;
}
#point {
\t margin-top: 45px;
\t font-size: 21px;
\t font-weight: bold;
}
#lvl {
\t margin-bottom: 0px;
\t font-size: 24px;
\t font-weight: bold;
}
#exp {
\t margin-bottom: 0px;
\t margin-top: 10px;
\t font-size: 16px;
}
#neededExp {
\t margin-top: 5px;
\t font-size: 16px;
}
#gold {
\t margin-top: 30px;
\t font-weight: bold;
}
#mainAttributes {
\t text-align: left;
\t font-weight: bold;
\t font-size: 24px;
\t padding-bottom: 45px;
}
#attributes{f
\t text-align: left;
\t font-size: 20px;
\t display: inline-block;
}
.logEntries {
\t display: none;
}
.choiceBtn {
\t margin-left: 5%;
\t margin-top: 3%;
}
.death {
\t color: red;
\t font-weight: bold;
}
.boldUp {
\t font-weight: bold;
}
.optionMenuBtn {
\t margin-left: 5%;
\t margin-top: 3%;
}
#optionMenu {
\t text-align: center;
\t display: none;
}
.optionMenuBtn:nth-child(1) {
\t margin-left: 0px;
}
#actionMenu {
\t text-align: center;
}
.actionMenuBtn {
\t margin-left: 5%;
}
.actionMenuBtn:nth-child(1) {
\t margin-left: 0px;
}
.choiceBtn:nth-child(1) {
\t margin-left: 0px;
}
.playerAttack {
\t text-align:left;
}
.enemyAttack {
\t text-align: right;
}
#battleLog {
\t margin-left: 35%;
\t margin-right: 35%;
\t margin-top: 10%;
\t text-align: center;
}
#battleLog h1 {
\t font-size: 50px;
\t margin-bottom: 10%;
}<!DOCTYPE html>
<html>
<head>
\t <meta charset="UTF-8">
</head>
<body>
\t <div id="gameContainer">
\t \t <h1 id="gameTitle">Your character</h1>
\t \t <div id="character">
\t \t \t <div id="attributes">
\t \t \t \t <img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg" style="width: 260px; margin-right: 20px; box-shadow: 0px 0px 10px black; float: left;"> \t
\t \t \t \t <table id="mainAttributes">
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Name:</td>
\t \t \t \t \t \t <td><span id="name"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Race:</td>
\t \t \t \t \t \t <td><span id="race"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td>Prof:</td>
\t \t \t \t \t \t <td><span id ="profession"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t \t <table>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><span>Strength:</span></td>
\t \t \t \t \t \t <td><span id="strength"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><span>Endurance:</span></td>
\t \t \t \t \t \t <td><span id="endurance"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><span>Dexterity:</span></td>
\t \t \t \t \t \t <td><span id="dexterity"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><span>Intelligence:</span></td>
\t \t \t \t \t \t <td><span id="intelligence"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t \t <tr>
\t \t \t \t \t \t <td><span>Charism:</span></td>
\t \t \t \t \t \t <td><span id="charism"></span></td>
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t </div>
</body>
</html>