Question

我有一个id为“right_column”的div标签，在我的css中，我可以改变它的位置值，除非我改变左边的值，它不会移动。

这是我的html＆amp; 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未关闭

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我可能会遗漏某些内容，但我将您的代码复制到笔中并成功更改了左侧值。

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

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

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

2 个答案: