在调整大小的浏览器上设置HTML元素
在调整大小的浏览器上设置HTML元素
提问于 2013-07-23 14:12:08
我面临着一个问题，当我减少我的browser window size，HTML element将是disappear.But，我想要的是使元素可见，并垂直显示。我已经搜索了很多次，但没有得到正确的答案，解决我的problem.Here是我的代码。
<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开始作为大小decreasing.Thanks提前消失。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-23 15:22:32
如果没有严格的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徽标就会关闭。
当第二个列表项关闭时，您不仅可以使用window width，还可以使用和div width来处理。
Stack Overflow用户
发布于 2013-07-23 15:28:24
就像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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17802647
复制相关文章
相似问题
腾讯云开发者
