Question

我正在尝试调整布局大小，使图像为屏幕宽度的100％。我得到了那个部分，但是当我尝试放置一个div以使其适合图像中的框时，我似乎无法让它对于不同尺寸的屏幕而言是可靠的。有没有办法确保我的div会坐在我的盒子里？我已附上我的代码的相关部分以供参考。我正在测试两种不同尺寸的屏幕（一个较小的chromebook和一个17“东芝）。我只是学习响应式网页设计，所以我不太确定问题是什么。

谢谢！

<div id="banner">
  <img src="http://grouptheory.sammiirose.com/group%20theory%20header%202.png" width="100">
</div>
<div id="stuff">
  Test words in here
</div>
<style type="text/css">
  #banner{ top: 0%; width:100%;}
  #stuff { position: absolute; height: 70%; top: 25%; left: 1%; width: 72%;
           border: 1px solid black; overflow: auto; color: #000000; 
           text-align: center;}
</style>

Answer 1

我不太了解你的问题，但我认为你需要这个。

    <div id="stuff">
      <div id="banner">
          <img src="http://grouptheory.sammiirose.com/group%20theory%20header%202.png">
        </div>
      Test words in here
    </div>
    <style type="text/css">
      #banner img{ width:100%;}
      #stuff { position: absolute; height: 70%; top: 25%; left: 1%; width: 72%;
               border: 1px solid black; color: #000000; 
               text-align: center;}
    </style>

动态调整DIV大小以适应在不同屏幕上调整大小的空间

1 个答案: