0

当我减少我的 时，我面临一个问题browser window size，HTML element会消失。但我想要的是使元素可见并垂直显示。我搜索了很多但没有得到解决我问题的正确答案。这是我的代码。

  <div  style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 800px">
            <table width= "75%" style="margin-left:1%">
                <tr>
                    <td width="30%">
                        @Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">@TempData["ErrorMessage"]</div>
                    </td>
                    <td  width="70%" >
                        <div id="qrcode" style="display: none">                       
                            <img src="@Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })"  onclick="AppendURL('@this.Model.ShortUrl')"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

当我减小尺寸时，QR code Image随着尺寸的减小开始消失。在此先感谢。

4

2 回答 2

0

如果没有硬 DOM 操作，您无法将表格单元格移动到下一行，但您可以使用ulelement. 列表可以是水平的或垂直的——这就是你所需要的。
请参阅此链接。
HTML： 

<p id="size"></p>
<div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10px; width: 600px;">
  <ul id="holder" style="display: inline; list-style-type: none;">
        <li style="display: inline; list-style-type: none;">
            <img style="width: 200px;" src="http://yandex.st/www/1.630/yaru/i/logo.png" />
        </li>
        <li style="display: inline; list-style-type: none;">
            <img style="width: 200px;" src="http://www.google.ru/images/srpr/logo4w.png" />
        </li>
  </ul>
</div>

Javascript： 

window.onresize = getWindowWidthHeight;
window.onload = getWindowWidthHeight;
function getWindowWidthHeight(event){
  var size = document.getElementById('size');
  var width = window.innerWidth;
  var height = window.innerHeight;
  size.innerHTML = 'Window width: ' + width + 'px<br />Window height: ' + height + 'px';
  var firstLi = document.getElementById('holder').children[0];
  if (width > 600) {
    firstLi.style.display = 'inline';
  } else {
    firstLi.style.display = 'list-item';
  }
};

和小CSS： 

html, body {
  width: 100%;
  height: 100%;
}

您可以在 jsFiddle 上拖动边框，看看发生了什么。
如果窗口宽度小于 600 像素，则 Google 徽标会下降。
当第二个列表项下降时，您不仅可以使用窗口宽度，还可以使用 div 宽度来处理。

于 2013-07-23T07:22:32.127 回答
0

就像 ostapische 说的那样，您的表格没有响应。你可以像这样使用 div。

<div class="container">
   <div class="captcha"></div>
   <div class="qrcode"></div>
</div>

 .container{
    border: 1px solid lightgrey;
    border-radius: 10px 10px 10px 10px;
    width: 800px
 }

.captcha{
    float:left;
    width:100%;
    max-width:30%;
    height:100px;
}

.qrcode{
    float:left;
    width:100%;
    max-width:70%;
    height:100px;
}
于 2013-07-23T07:28:24.450 回答