0

我正在创建一个能够在手机上查看的 web 应用程序，它非常适合屏幕。到目前为止，我已经通过更改相应 webapp 的 CSS 进行了尝试。最初，它非常适合下面对下拉列表框进行任何选择。

在此处输入图像描述

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

在此处输入图像描述

这是我的 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 文本框也有一个 width:100% 属性，如下所示。

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

据我所知，只要作为 contentplaceholder 的父布局是 100%，图片不应该超过 100% 吗？它可以在我的桌面上完美运行，但不能在我的 Opera 模拟器上运行。如果有人能就此启发我，将不胜感激。

问候。

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

4

2 回答 2

0 
#ContentPlaceHolder
{
  position:absolute;
  margin:0px;
  width:100%;
  left:0;
  right:0;
}
于 2013-07-17T07:16:46.140 回答
0

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

<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。

于 2013-07-17T07:57:42.957 回答