Question

我有一个img，我想在右上角对齐。如果窗口太小，我不希望图像与文本重叠，但使窗口可滚动。所以我做了一个div宽度最大宽度：1000px;。

这就是我现在所拥有的

<div style="z-index: -1; width:100%; position: absolute;">
   <div style="width: auto; min-width: 1000px; display:inline-block;"></div>
   <div style="display:inline-block; float: right;"> 
        <a href="#" id="a_logo_hoek"> 
            <img src="xx.jpg" style="float: right; margin-top:-30px;" /> 
        </a> 
    </div>
</div>

Answer 1

这样的事情怎么样：

<div style="width: 100%; min-width: 1000px; display:inline-block;">
   <div style="display:inline-block; float: right;"> 
      <a href="#" id="a_logo_hoek"> 
         <img src="xxx.jpg" style="float: right; margin-top:-30px;" /> 
      </a> 
   </div>
</div>

将包含div的{{1}}设置为img min-width和1000px width。

Answer 2

使窗口可滚动使用包含所有页面元素的div中的overflow:auto;。
将图片置于右上方，使用position: absolute ; top: 0; right: 0;
现在您不需要使用min-width: 1000px;

这是你的代码::

<div style="z-index: -1; width:100%; overflow:auto;">
  <div style="width: auto;display:inline-block;"></div>
  <div style="display:inline-block; position: absolute ; top: 0; right: 0;"> 
    <a href="#" id="a_logo_hoek"> 
        <img src="xx.jpg" style="float: right; margin-top:-30px;" /> 
    </a> 
  </div>
</div>

将img右对齐，如果窗口宽度太小，则使页面可滚动

2 个答案: