尽管放置了ContentPlaceHolder＆amp; <div> as width：100％</div>

Question

我正在创建一个能够在手机上查看的webapp，同时它非常适合屏幕。到目前为止，我已经通过更改相应webapp的CSS来尝试它。最初，它非常适合下面的内容，对dropdownlistbox进行任何选择。

但是，进行填充图像/文本的选择后，布局会发生巨大变化。

这是我的CSS代码，我重新调整父布局的大小，即ContentPlaceHolder，如下所示

#ContentPlaceHolder
{
  position:absolute;
  margin:0px;
  width:100%;
  left:0px;
}

我已经通过此标记在主页中插入了此contentplaceholder css属性

<div id="ContentPlaceHolder"></div>

以下所有详细信息的布局分类为headerbody。

#headerbody
{
  margin-top:50px;
  position:absolute;
  left:0%;
  margin: 0px;
  width:100%;


}

图片中显示的3个文本框也有宽度：100％属性，如下所示。

<asp:TextBox ID="txtOR" runat="server" ReadOnly="True" TextMode="MultiLine" Height="80px" Width="100%"></asp:TextBox>

在我所知之前，只要内容占位符的父布局是100％，图片是否应该超出100％？它在我的桌面上完美运行，但在我的歌剧模拟器上却没有。如果有人能在这方面给我启发，我将不胜感激。

问候。

更新 通过减小我为图像修复的尺寸，它很好地修复了我的移动模拟器。但是，图片有点太小了。是否有可能所有5张图片都能很好地适应屏幕？

Answer 1

#ContentPlaceHolder
{
  position:absolute;
  margin:0px;
  width:100%;
  left:0;
  right:0;
}

Answer 2

作为替代方案，请尝试使用：

<div style="width:80%;overflow-y: visible">
<ul style="width:100%">
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
<li><img src="..." /></li>
</ul>

</div>

溢出-y：可见;将水平滚动条添加到容器div。