Question

当我减少我的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会随着尺寸的减小而开始消失。谢谢提前。

Answer 1

如果没有硬DOM操作，您无法将表格单元格移动到下一行，但您可以使用ul元素。列表凸轮水平或垂直 - 这就是您所需要的请参阅this链接 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上拖动边框，看看发生了什么如果窗口宽度小于600px，则Google徽标会下降当第二个列表项出现故障时，您不仅可以使用窗口宽度，还可以使用div宽度来处理。

Answer 2

就像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;
}

在重新调整大小的浏览器上设置HTML元素

2 个答案: