更改 CSS 在屏幕上不移动对象的位置

Question

我有一个 ID 为 "right_column" 的 div 标签，在我的 css 中，我可以改变它的位置值，除了当我改变左边的值时，它不会移动.

这是我的 html & CSS。但是，如果您运行代码片段，由于 PHP 的原因，它无法正常工作。

html {
  background: url(bg.jpg);
  background-repeat: repeat;
}
#main_image {
  max-width: 45%;
  position: absolute;
  left: 5%;
  top: 120px;
}
#right_column {
  position: relative;
  top: 120px;
  left: 50%;
}
#title {
  font-size: 36px;
  font-family: 'Oswald', sans-serif;
}
table,
th,
td {
  border: 1px solid #000000;
  border-bottom: none;
  background-color: transparent;
  /* fbfad6 */
  border-collapse: collapse;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
}
th,
td {
  padding: 10px;
  padding-left: 35px;
  padding-right: 35px;
}
.details_header {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: none !important;
  border-bottom: 1px solid #000000 !important;
}
.description {
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
}

<img id="main_image" src="image/PHP_CODE.png" />
<div id="right_column">
<span id="title"><?php echo $name ?></span>
<div class="details_wrap">
  <table id="details">
    <tr>
      <td class="details_header">Price</td>
      <td class="details_header">Saving</td>
    </tr>
    <tr>
      <td>$
        <?php echo $price ?>
      </td>
      <td>
        <?php echo $saving ?>%</td>
    </tr>
  </table>
</div>
<div class="description">
  <span><?php echo $description ?><br><br></span>
  <span><?php echo $description2 ?></span>
</div>
</div>

我觉得我可能遗漏了一些非常明显的东西，如果是这样，很抱歉浪费你的时间。任何帮助将不胜感激。可以看到结果here

-卢克

Answer 1

在您的代码示例中，您的 img id 未关闭

html {
  background: url(bg.jpg);
  background-repeat: repeat;
}
#main_image {
  max-width: 45%;
  position: absolute;
  left: 5%;
  top: 120px;
}
#right_column {
  position: relative;
  top: 120px;
  left: 50%;
}
#title {
  font-size: 36px;
  font-family: 'Oswald', sans-serif;
}
table,
th,
td {
  border: 1px solid #000000;
  border-bottom: none;
  background-color: transparent;
  /* fbfad6 */
  border-collapse: collapse;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
}
th,
td {
  padding: 10px;
  padding-left: 35px;
  padding-right: 35px;
}
.details_header {
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: none !important;
  border-bottom: 1px solid #000000 !important;
}
.description {
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
}

<img id="main_image" src="image/<?php echo $uuid ?>.png"> <div id="right_column">

<div id="right_column">
<span id="title"><?php echo $name ?></span>
<div class="details_wrap">
  <table id="details">
    <tr>
      <td class="details_header">Price</td>
      <td class="details_header">Saving</td>
    </tr>
    <tr>
      <td>$
        <?php echo $price ?>
      </td>
      <td>
        <?php echo $saving ?>%</td>
    </tr>
  </table>
</div>
<div class="description">
  <span><?php echo $description ?><br><br></span>
  <span><?php echo $description2 ?></span>
</div>
</div>

Answer 2

我可能遗漏了一些东西，但是我将您的代码复制到笔中并成功更改了左值。

http://codepen.io/cdcampbell26/pen/YPNryP

#right_column {
      position: relative;
      top: 120px;
      left: 70%;
}

更改 CSS 在屏幕上不移动对象的位置

Changing CSS Position not Moving Object on Screen

html

css