簡單的html顯示1或2列，具體取決於屏幕寬度

Question

我有一個簡單的監控網站，顯示一些rrd圖。 這些圖形是動態創建的png圖像，但是它們具有固定的尺寸。

我想要的是如果瀏覽器寬度低於閾值則在1列中顯示它們，如果瀏覽器內部窗口寬度高於該閾值，則在2列顯示它們。

從我自學的小html中，我知道表是使用amd子句生成的（列由來完成），並且窗口寬度由innerWidth javascript屬性返回。 我不知道如何連接這些信息位以增加列寬的智能。

這是我的代碼

    <table style="width:100%">
    <tr>
            <td>
                    <body><center>
                    <h2>CO2: unfiltered values </h2>
                    <p><a href="./index_CO2unf.html"><img src="./ramdisk/htdocs/CO2unf_1h.png" alt="CO2unf_1h.png"/></a></p><p><br></p>
                    <h2>CO2: filtered values </h2>
                    <p><a href="./index_CO2fil.html"><img src="./ramdisk/htdocs/CO2fil_1h.png" alt="CO2fil_1h.png"/></a></p><p><br></p>
                    <h2>O2: partial pressure O2 values</h2>
                    <p><a href="./index_O2pp.html"><img src="./ramdisk/htdocs/O2pp_1h.png" alt="O2pp_1h.png"/></a></p><p><br></p>
            </td>                                                                                                                
            <td> 
                    <h2>O2: percentage O2 values</h2>
                    <p><a href="./index_O2pct.html"><img src="./ramdisk/htdocs/O2pct_1h.png" alt="O2pct_1h.png"/></a></p><p><br></p>
                    <h2>O2: Temperature values</h2>                                                                                 
                    <p><a href="./index_O2temp.html"><img src="./ramdisk/htdocs/O2temp_1h.png" alt="O2temp_1h.png"/></a></p><p><br></p>
                    <h2>O2: Pressure values</h2>                                                                                       
                    <p><a href="./index_O2pres.html"><img src="./ramdisk/htdocs/O2pres_1h.png" alt="O2pres_1h.png"/></a></p><p><br></p>
            </body>                                                                                                                    
            </td>  
    </tr>

當瀏覽器寬度低於閾值時，我需要刪除</td><td>中央代碼。

我怎樣才能做到這一點？

Answer 1

您可以刪除表，並使用@media查詢使用2 <div>進行操作，如下所示： https : @media

body{margin: 0;}
div{width: 50%; height: 600px; float: left; text-align: center;}
.div-1{background-color: blue;}
.div-2{background-color: red;}
@media (max-width: 650px){
    div{width: 100%;}
}

Answer 2

您可以使用此標記（為演示而簡化）：

 .two-across { float: left; margin-right: 10px; } .two-across:nth-child(2n + 1) { clear: left; } .cleared { clear: left; }

 <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/1"></p> </div> <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/2"></p> </div> <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/3"></p> </div> <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/4"></p> </div> <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/5"></p> </div> <div class="two-across"> <h2>Heading</h2> <p><img src="http://lorempixel.com/400/600/technics/6"></p> </div> <!-- clearing div should appear after floated elements --> <div class="cleared"></div>

簡單的html顯示1或2列，具體取決於屏幕寬度

問題描述

2 個解決方案

解決方案1
2 已采納 2015-09-28 18:15:29

解決方案2
2 2015-09-28 18:30:06

簡單的html顯示1或2列，具體取決於屏幕寬度

問題描述

2 個解決方案

解決方案1 2 已采納 2015-09-28 18:15:29

解決方案2 2 2015-09-28 18:30:06

解決方案1
2 已采納 2015-09-28 18:15:29

解決方案2
2 2015-09-28 18:30:06