在重新調整瀏覽器大小時設置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元素

回答

相關問題