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

Question

我有一个我想在右上角对齐的 img。如果窗口太小，我不希望图像与文本重叠，而是使窗口可滚动。所以我做了一个 div 宽度 max-width: 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

• overflow:auto;在包含所有页面元素的 div中使窗口可滚动使用。
• 将图像定位在右上角使用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>

Answer 2

像这样的东西怎么样：

<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包含您的设置img为拥有 a min-widthof1000px和 a widthof 100%。