Question

我不是代码专家，但我有一些经验...... 我一直在努力解决这个问题。

我有这个代码，我希望滚动条位于屏幕内部或摄像机外部。我尝试了很多东西，但没有成功。你能告诉我什么是错的吗？

<table>
  <tbody>
    <tr>
      <td height="219" background="http://i.imgur.com/G3hEVXm.png"></td>
    </tr>
    <tr>
      <td width="106" height="218" background="http://i.imgur.com/Svp1s1L.png" style="padding-left:110px;padding-right:110px;">
        <div style="width:445px;display:block;overflow:auto;height:218px;max-width:670px;">
          <p style="text-align:left;height:320px;width:300px;font-family:arial;font-size:12px;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
        </div>
      </td>
    </tr>
    <tr>
      <td height="78" background="http://i.imgur.com/URFZF8I.png"></td>
    </tr>
  </tbody>
</table>

Answer 1

这里的真正问题是你正在尝试使用表格 - 虽然可以进行调整以最终实现这一点，唯一真正的确定性是你最终会头痛。

考虑使用position: relative;创建一个父div，设置高度和宽度以及相机图像的background-image。然后，在其中放置一个较小的div，将position: absolute;放在其上，然后使用top和left将其正确放置在您希望的位置。

＆＃13;

#parent {
    width: 800px;
    height: 600px;
    position: relative;
    background-image: url(https://s-media-cache-ak0.pinimg.com/originals/ef/66/27/ef662748d23852026c96e0d06224e6ca.png);
    background-repeat: no-repeat;
}

#parent #child {
    width: 255px;
    height: 173px;
    background-color: white;
    position: absolute;
    top: 206px;
    left: 245px;
    overflow: auto;
}

＆＃13;

<div id="parent">

    <div id="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus euismod ligula ut suscipit. Morbi viverra congue nulla nec consequat. Nulla nec enim sit amet risus posuere luctus eget ut risus. Phasellus nibh purus, bibendum vitae aliquam nec, finibus vel magna. Praesent iaculis quam non orci suscipit porttitor. Duis id leo vel nulla mattis varius. Nullam bibendum mi et quam commodo tempor.

Praesent urna erat, vehicula et porta id, ultricies maximus odio. Duis augue tortor, faucibus nec neque at, efficitur efficitur lorem. Phasellus pulvinar interdum placerat. Nunc volutpat justo vulputate elit ultricies, nec dignissim lectus dapibus. Aenean sagittis sollicitudin gravida. Quisque rutrum lorem eget gravida posuere. Nulla facilisi. Vestibulum imperdiet justo vel erat varius, imperdiet fermentum lectus consectetur. Praesent sollicitudin ac turpis id imperdiet. Integer in ante efficitur, convallis sem in, gravida ex. Fusce a consectetur sapien. Mauris dignissim augue vitae molestie convallis.
    </div>
</div>

＆＃13;

编辑：您在评论中提到您无法直接操作CSS。在这种情况下，您可以像在示例中一样将元素放在元素上。我使用内联样式here创建了一个示例。

Answer 2

确认Santi所说的内容，这里是您可以使用表格方式获得的内容。如果您尝试放置此代码的地方没有支持外部css，您可以尝试内联转换所有样式。

＆＃13;

table,
tr,
td {
  border: 0;
  padding: 0;
  margin: 0;
}
.cam-upper {
  background: url("http://i.imgur.com/G3hEVXm.png") no-repeat;
  height: 219px;
}
.cam-body {
  padding-left: 110px;
  width: 600px;
  background: url("http://i.imgur.com/Svp1s1L.png") no-repeat;
}
.cam-lower {
  background: url("http://i.imgur.com/URFZF8I.png") no-repeat;
  height: 78px;
}
.cam-screen {
  width: 320px;
  display: block;
  height: 218px;
  overflow: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 8px solid transparent;
  text-align: left;
  font-family: arial;
  font-size: 12px;
  font-weight: bold;
}

＆＃13;

<table cellspacing="0">
  <tbody>
    <tr>
      <td class="cam-upper"></td>
    </tr>
    <tr class="nopadding">
      <td class="cam-body">
        <div class="cam-screen">
          <p>Lorem ipsum dolor sit amet, nonummy repellat habitasse pede proin, nunc odio aut magna nunc, nisl tellus fusce rutrum, nunc nibh nullam nunc ut.</p>
          <p>Vitae rutrum maecenas suscipit, in quam ac porttitor pharetra, sit litora rhoncus elementum amet.</p>
          <p>Ipsum nulla vitae penatibus lorem, nunc mus nisl sit, sem felis nullam gravida dui, ipsum at vitae consectetuer bibendum.</p>
          <p>Habitant cras orci et, amet pede aenean dis, mauris accumsan donec vitae, vitae felis faucibus nam eget.</p>
        </div>
      </td>
    </tr>
    <tr>
      <td class="cam-lower"></td>
    </tr>
  </tbody>
</table>

＆＃13;

无法在不弄乱整个文档的情况下调整“盒装”文本的大小

2 个答案: