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

您可以删除自己的表格，只需使用<div> {2} @media这样的查询：https://jsfiddle.net/DIRTY_SMITH/esptpmwk/3/

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 个答案: