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

【问题标题】：Align img right, make page scrollable if window-width is too small右对齐img，如果窗口宽度太小，使页面可滚动
【发布时间】：2013-07-28 19:00:42
【问题描述】：

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

【问题讨论】：

标记中有很多html 错误。看来您在每个 html 标签 EDITED 上都错过了 <，我看到您现在已经编辑了它

标签： css alignment

【解决方案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>

将包含您的img 的div 设置为具有1000px 的min-width 和100% 的width。

【讨论】：

不客气。如果它解决了您的问题，请考虑接受我的回答。

【解决方案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>

【讨论】：