从旁边的图片下方移动table

Question

我试图找到问题所在，但就是找不到，因为它看起来有点复杂。

正如您在代码片段中看到的那样，第一个 table 声明 div 的权重以及 img，如果图像旁边的第二个 table 具有更大的权重然后是第一个重量，然后它就在下面移动。我想知道一个 "clean" 解决方案，像这样使用 float 是否错误等等，因为我可以为第一个 table 设置更大的静态权重，这将解决整个问题。（我刚刚将文本 "profession:" 更改为 "prof:"，因为它减少了 table 权重并导致问题出现）

#gameContainer {
 margin-top: 20px;
}

#character {
 text-align: center;
 font-size: 18px;
}

#gameTitle {
 font-family: GameFont;
 font-size: 70px;
 margin-bottom: 50px;
 text-align: center;
}

#attributes td {
 padding-left: 10px;
}

#explore {
 margin-top: 45px;
 text-align: center;
}

.bttn:hover {
 cursor: pointer;
}

.bttn {
 box-shadow: 0.5px 0.5px 3px black;
 width: 24px;
}

#lvl {
 margin-top: 30px;
}
#start {
 margin-top: 45px;
}

#Log {
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}

#point {
 margin-top: 45px;
 font-size: 21px;
 font-weight: bold;
}

#lvl {
 margin-bottom: 0px;
 font-size: 24px;
 font-weight: bold;
}

#exp {
 margin-bottom: 0px;
 margin-top: 10px;
 font-size: 16px;
}

#neededExp {
 margin-top: 5px;
 font-size: 16px;
}

#gold {
 margin-top: 30px;
 font-weight: bold;
}

#mainAttributes {
 text-align: left;
 font-weight: bold;
 font-size: 24px;
 padding-bottom: 45px;
}

#attributes{f
 text-align: left;
 font-size: 20px;
 display: inline-block;
}

.logEntries {
 display: none;
}

.choiceBtn {
 margin-left: 5%;
 margin-top: 3%;
}

.death {
 color: red;
 font-weight: bold;
}

.boldUp {
 font-weight: bold;
}

.optionMenuBtn {
 margin-left: 5%;
 margin-top: 3%;
}

#optionMenu {
 text-align: center;
 display: none;
}

.optionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

#actionMenu {
 text-align: center;
}

.actionMenuBtn {
 margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

.choiceBtn:nth-child(1) {
 margin-left: 0px;
}

.playerAttack {
 text-align:left;
}

.enemyAttack {
 text-align: right;
}

#battleLog {
 margin-left: 35%;
 margin-right: 35%;
 margin-top: 10%;
 text-align: center;
}

#battleLog h1 {
 font-size: 50px;
 margin-bottom: 10%;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div id="gameContainer">
  <h1 id="gameTitle">Your character</h1>
  <div id="character">
   <div id="attributes">
    <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;"> 
    <table id="mainAttributes">
     <tr>
      <td>Name:</td>
      <td><span id="name"></span></td>
     </tr>
     <tr>
      <td>Race:</td>
      <td><span id="race"></span></td>
     </tr>
     <tr>
      <td>Prof:</td>
      <td><span id ="profession"></span></td>
     </tr>
    </table>
    <table>
     <tr>
      <td><span>Strength:</span></td>
      <td><span id="strength"></span></td>
     </tr>
     <tr>
      <td><span>Endurance:</span></td>
      <td><span id="endurance"></span></td>
     </tr>
     <tr>
      <td><span>Dexterity:</span></td>
      <td><span id="dexterity"></span></td>
     </tr>
     <tr>
      <td><span>Intelligence:</span></td>
      <td><span id="intelligence"></span></td>
     </tr>
     <tr>
      <td><span>Charism:</span></td>
      <td><span id="charism"></span></td>
     </tr>
    </table>
   </div>
</body>
</html>

Answer 1

我不知道您的页面情况如何，但是将 "attributes" 宽度增加到 500 像素或更多，然后将 table 向右浮动就可以了。由于这看起来很基本，我会建议这个答案，但我通常不会推荐它。这是一种不好的做法，但它确实有效。

我总是建议制作合适的基本样式 sheet 或使用像 bootstrap 这样的框架有助于正确设计网站。

Answer 2

抱歉，您为什么要创建 2 个 table？这个解决方案怎么样？

#gameContainer {
 margin-top: 20px;
}

#character {
 text-align: center;
 font-size: 18px;
}

#gameTitle {
 font-family: GameFont;
 font-size: 70px;
 margin-bottom: 50px;
 text-align: center;
}

#attributes td {
 padding-left: 10px;
}

#explore {
 margin-top: 45px;
 text-align: center;
}

.bttn:hover {
 cursor: pointer;
}

.bttn {
 box-shadow: 0.5px 0.5px 3px black;
 width: 24px;
}

#lvl {
 margin-top: 30px;
}
#start {
 margin-top: 45px;
}

#Log {
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}

#point {
 margin-top: 45px;
 font-size: 21px;
 font-weight: bold;
}

#lvl {
 margin-bottom: 0px;
 font-size: 24px;
 font-weight: bold;
}

#exp {
 margin-bottom: 0px;
 margin-top: 10px;
 font-size: 16px;
}

#neededExp {
 margin-top: 5px;
 font-size: 16px;
}

#gold {
 margin-top: 30px;
 font-weight: bold;
}

#mainAttributes {
 text-align: left;
 font-weight: bold;
 font-size: 24px;
 padding-bottom: 45px;
}

#attributes{
 text-align: left;
 font-size: 20px;
 display: inline-block;
}

.logEntries {
 display: none;
}

.choiceBtn {
 margin-left: 5%;
 margin-top: 3%;
}

.death {
 color: red;
 font-weight: bold;
}

.boldUp {
 font-weight: bold;
}

.optionMenuBtn {
 margin-left: 5%;
 margin-top: 3%;
}

#optionMenu {
 text-align: center;
 display: none;
}

.optionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

#actionMenu {
 text-align: center;
}

.actionMenuBtn {
 margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

.choiceBtn:nth-child(1) {
 margin-left: 0px;
}

.playerAttack {
 text-align:left;
}

.enemyAttack {
 text-align: right;
}

#battleLog {
 margin-left: 35%;
 margin-right: 35%;
 margin-top: 10%;
 text-align: center;
}

#battleLog h1 {
 font-size: 50px;
 margin-bottom: 10%;
}

<head>
 <meta charset="UTF-8">
</head>
<body>
 <div id="gameContainer">
  <h1 id="gameTitle">Your character</h1>
  <div id="character">
   <div id="attributes">
    <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;"> 
    <table id="mainAttributes">
     <tr>
      <td>Name:</td>
      <td><span id="name">assssssssssssssss</span></td>
     </tr>
     <tr>
      <td>Race:</td>
      <td><span id="race">asdasdsaddsasad</span></td>
     </tr>
     <tr>
      <td>Profession:</td>
      <td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
     </tr>
     <tr>
      <td><span>Strength:</span></td>
      <td><span id="strength">asdadsdasfsdgfshgdh</span></td>
     </tr>
     <tr>
      <td><span>Endurance:</span></td>
      <td><span id="endurance"></span></td>
     </tr>
     <tr>
      <td><span>Dexterity:</span></td>
      <td><span id="dexterity"></span></td>
     </tr>
     <tr>
      <td><span>Intelligence:</span></td>
      <td><span id="intelligence"></span></td>
     </tr>
     <tr>
      <td><span>Charism:</span></td>
      <td><span id="charism"></span></td>
     </tr>
    </table>
   </div>

仅使用 1 table，无论如何我建议您使用 display:flex。无论如何，在我的代码中，只需动态调整该图像的大小，它就可以工作

Answer 3

我先从 #attributes 中删除 display:inline-block;，然后从 #character 中删除 text-align:center;。这样您就拥有了 table 的默认显示设置。目前还没有额外的属性可以乱用。

#gameContainer {
 margin-top: 20px;
}

#character {
 font-size: 18px;
}

#gameTitle {
 font-family: GameFont;
 font-size: 70px;
 margin-bottom: 50px;
 text-align: center;
}

#attributes td {
 padding-left: 10px;
}

#explore {
 margin-top: 45px;
 text-align: center;
}

.bttn:hover {
 cursor: pointer;
}

.bttn {
 box-shadow: 0.5px 0.5px 3px black;
 width: 24px;
}

#lvl {
 margin-top: 30px;
}
#start {
 margin-top: 45px;
}

#Log {
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}

#point {
 margin-top: 45px;
 font-size: 21px;
 font-weight: bold;
}

#lvl {
 margin-bottom: 0px;
 font-size: 24px;
 font-weight: bold;
}

#exp {
 margin-bottom: 0px;
 margin-top: 10px;
 font-size: 16px;
}

#neededExp {
 margin-top: 5px;
 font-size: 16px;
}

#gold {
 margin-top: 30px;
 font-weight: bold;
}

#mainAttributes {
 text-align: left;
 font-weight: bold;
 font-size: 24px;
 padding-bottom: 45px;
}

#attributes{
 text-align: left;
 font-size: 20px;
}

.logEntries {
 display: none;
}

.choiceBtn {
 margin-left: 5%;
 margin-top: 3%;
}

.death {
 color: red;
 font-weight: bold;
}

.boldUp {
 font-weight: bold;
}

.optionMenuBtn {
 margin-left: 5%;
 margin-top: 3%;
}

#optionMenu {
 text-align: center;
 display: none;
}

.optionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

#actionMenu {
 text-align: center;
}

.actionMenuBtn {
 margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

.choiceBtn:nth-child(1) {
 margin-left: 0px;
}

.playerAttack {
 text-align:left;
}

.enemyAttack {
 text-align: right;
}

#battleLog {
 margin-left: 35%;
 margin-right: 35%;
 margin-top: 10%;
 text-align: center;
}

#battleLog h1 {
 font-size: 50px;
 margin-bottom: 10%;
}

<head>
 <meta charset="UTF-8">
</head>
<body>
 <div id="gameContainer">
  <h1 id="gameTitle">Your character</h1>
  <div id="character">
   <div id="attributes">
    <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;"> 
    <table id="mainAttributes">
     <tr>
      <td>Name:</td>
      <td><span id="name">assssssssssssssss</span></td>
     </tr>
     <tr>
      <td>Race:</td>
      <td><span id="race">asdasdsaddsasad</span></td>
     </tr>
     <tr>
      <td>Profession:</td>
      <td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
     </tr>
     <tr>
      <td><span>Strength:</span></td>
      <td><span id="strength">asdadsdasfsdgfshgdh</span></td>
     </tr>
     <tr>
      <td><span>Endurance:</span></td>
      <td><span id="endurance"></span></td>
     </tr>
     <tr>
      <td><span>Dexterity:</span></td>
      <td><span id="dexterity"></span></td>
     </tr>
     <tr>
      <td><span>Intelligence:</span></td>
      <td><span id="intelligence"></span></td>
     </tr>
     <tr>
      <td><span>Charism:</span></td>
      <td><span id="charism"></span></td>
     </tr>
    </table>
   </div>

Answer 4

抱歉，您为什么要创建 2 个 table？这个解决方案怎么样？

#gameContainer {
 margin-top: 20px;
}

#character {
 text-align: center;
 font-size: 18px;
}

#gameTitle {
 font-family: GameFont;
 font-size: 70px;
 margin-bottom: 50px;
 text-align: center;
}

#attributes td {
 padding-left: 10px;
}

#explore {
 margin-top: 45px;
 text-align: center;
}

.bttn:hover {
 cursor: pointer;
}

.bttn {
 box-shadow: 0.5px 0.5px 3px black;
 width: 24px;
}

#lvl {
 margin-top: 30px;
}
#start {
 margin-top: 45px;
}

#Log {
 text-align: center;
 margin-left: 5%;
 margin-right: 5%;
}

#point {
 margin-top: 45px;
 font-size: 21px;
 font-weight: bold;
}

#lvl {
 margin-bottom: 0px;
 font-size: 24px;
 font-weight: bold;
}

#exp {
 margin-bottom: 0px;
 margin-top: 10px;
 font-size: 16px;
}

#neededExp {
 margin-top: 5px;
 font-size: 16px;
}

#gold {
 margin-top: 30px;
 font-weight: bold;
}

#mainAttributes {
 text-align: left;
 font-weight: bold;
 font-size: 24px;
 padding-bottom: 45px;
  width:40%!important
}

#attributes{
 text-align: left;
 font-size: 20px;
 display: flex;
  flex-wrap: wrap;
}
img{
  display: block;
  max-height:500px;
  width: auto;
  height: auto;
  margin-right: 20px; 
  box-shadow: 0px 0px 10px black; float: left;
}
.logEntries {
 display: none;
}

.choiceBtn {
 margin-left: 5%;
 margin-top: 3%;
}

.death {
 color: red;
 font-weight: bold;
}

.boldUp {
 font-weight: bold;
}

.optionMenuBtn {
 margin-left: 5%;
 margin-top: 3%;
}

#optionMenu {
 text-align: center;
 display: none;
}

.optionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

#actionMenu {
 text-align: center;
}

.actionMenuBtn {
 margin-left: 5%;
}

.actionMenuBtn:nth-child(1) {
 margin-left: 0px;
}

.choiceBtn:nth-child(1) {
 margin-left: 0px;
}

.playerAttack {
 text-align:left;
}

.enemyAttack {
 text-align: right;
}

#battleLog {
 margin-left: 35%;
 margin-right: 35%;
 margin-top: 10%;
 text-align: center;
}

#battleLog h1 {
 font-size: 50px;
 margin-bottom: 10%;
}

<div id="gameContainer">
  <h1 id="gameTitle">Your character</h1>
  <div id="character">
   <div id="attributes">
    <img src="https://i.pinimg.com/736x/51/0d/99/510d992e8ef64fe523a025208fbf8f5e--fantasy-images-elf.jpg"> 
    <table id="mainAttributes">
     <tr>
      <td>Name:</td>
      <td><span id="name">assssssssssssssss</span></td>
     </tr>
     <tr>
      <td>Race:</td>
      <td><span id="race">asdasdsaddsasad</span></td>
     </tr>
     <tr>
      <td>Profession:</td>
      <td><span id ="profession">aaaaaaaaaaaaaaaaaaaaaaaaa</span></td>
     </tr>
     <tr>
      <td><span>Strength:</span></td>
      <td><span id="strength">asdadsdasfsdgfshgdh</span></td>
     </tr>
     <tr>
      <td><span>Endurance:</span></td>
      <td><span id="endurance"></span></td>
     </tr>
     <tr>
      <td><span>Dexterity:</span></td>
      <td><span id="dexterity"></span></td>
     </tr>
     <tr>
      <td><span>Intelligence:</span></td>
      <td><span id="intelligence"></span></td>
     </tr>
     <tr>
      <td><span>Charism:</span></td>
      <td><span id="charism"></span></td>
     </tr>
    </table>
   </div>

仅使用 1 table，无论如何我建议您使用 display:flex。

从旁边的图片下方移动table

Moving table from under picture next to it

html

css

element

alignment