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

当我减少我的browser window size，HTML element将会消失时，我正面临一个问题。但我想要的是使元素可见和垂直显示。我已经搜索了很多，但没有得到正确的解决我的问题的答案。这是我的代码。在重新调整浏览器大小时设置HTML元素

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

来源

2013-07-23 EHS

你可以发布html输出吗？ – ostapische

@ostapische是的..我昨天发布了与图片相同的问题，但没有人回答我。以下是它的链接。请帮助。（http://stackoverflow.com/questions/17780797/set-contents-of-page-according-to-browser-resolution） – EHS

啊，你现在有一个答案。然后我们可以把它作为一个副本来关闭。 –

如果没有硬性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宽度来处理第二个列表项关闭时的情况。

来源

2013-07-23 07:22:32 ostapische

Google徽标已经在第一个徽标下。请您编辑我的代码？ – EHS

查看关于您的旧问题的答案并关闭此问题。 – ostapische

thanx我明白了。 – EHS

像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-23 07:28:24

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

回答

相关问题