Fatal编程技术网
  • javascript/
  • Javascript 根据屏幕宽度显示1或2列的简单html

Javascript 根据屏幕宽度显示1或2列的简单html

javascript html css

Javascript 根据屏幕宽度显示1或2列的简单html,javascript,html,css,Javascript,Html,Css,我有一个简单的监控网站，显示一些rrd图。这些图形是动态创建的png图像，但它们具有固定的尺寸 我想要的是，如果浏览器宽度低于阈值，将它们显示在1列中；如果浏览器内部窗口宽度高于阈值，将它们显示在2列中 从我自学的小html中，我知道表是用amd子句生成的（列由完成），窗口宽度由innerWidth javascript属性返回。我不知道的是如何将这些信息连接起来，为列宽增加智能 这是我的密码 <table style="width:100%"> <tr>

我有一个简单的监控网站，显示一些
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>  


CO2：未过滤值


二氧化碳：过滤值


O2：分压O2值


O2：O2值百分比


O2：温度值


O2：压力值
当浏览器宽度低于阈值时，我需要删除中心
代码

我该怎么做呢？

您可以删除您的表，然后使用
@media
这样的查询执行2个
：

您可以删除您的表，然后使用
@media
这样的查询执行2个
：

您可以使用此标记（为了演示而简化）：

。两个交叉点{
浮动：左；
右边距：10px；
}
.2交叉：第n个子代（2n+1）{
清除：左；
}
.清除{
清除：左；
}

标题


标题


标题


标题


标题


标题
您可以使用此标记（简化以供演示）：

。两个交叉点{
浮动：左；
右边距：10px；
}
.2交叉：第n个子代（2n+1）{
清除：左；
}
.清除{
清除：左；
}

标题


标题


标题


标题


标题


标题
我会远离桌子，它们不是必需的。查看以指定有多少不同大小的列。下面是我将如何做我将远离表，它们不是必需的。查看以指定不同大小的列的数量。以下是我将如何执行此操作。请详细说明
。两个跨：第n个孩子（2n+1）
？在前面的回答中，我建议在每两行之后添加

标记。在修改后的答案中，我使用floats+clear在每行中显示最多两个项目，不需要手动换行
.two-oss:n子（2n+1）{clear…}
规则强制每个奇数框（1，3，5，…）在新行上。您可以将其移除，以便在每行上放置尽可能多的框。您能否详细说明一下
。两个跨：n个孩子（2n+1）
？在前面的回答中，我建议在每两行之后添加

标记。在修改后的答案中，我使用floats+clear在每行中显示最多两个项目，不需要手动换行
.two-oss:n子（2n+1）{clear…}
规则强制每个奇数框（1，3，5，…）在新行上。您可以删除它以在每行上容纳尽可能多的框。如何，我如何更新上面的内容以获得第二个css，该css具有相同的两对一列转换，但宽度不同？@nass我会帮助您，但我不确定我是否理解您的要求。没问题，我得到了它。我添加了2个@媒体条目。我把“div”改成了“.div-X”，还把“max width”改了。所以现在不同元素的双栏将以不同的宽度统一。看这里。浅蓝色从左文本列标注尺寸。因此，更大的右栏超出了浅蓝色边界。如何从较大的列中获取框尺寸？@nass我更新了你的fiddle，并添加了一些简单的javascript，它现在将选择最高的div，并将较小的div设置为相同的大小：嗯，我不理解子句
。我该怎么读呢？首先运行什么？html代码或javascript部分？如何，如何更新上述内容以获得第二个css，该css执行相同的两对一列转换，但宽度不同？@nass我会帮助您，但我不确定我是否理解您的要求。没关系，我知道了。我添加了2个@媒体条目。我把“div”改成了“.div-X”，还把“max width”改了。所以现在不同元素的双栏将以不同的宽度统一。看这里。浅蓝色从左文本列标注尺寸。因此，更大的右栏超出了浅蓝色边界。如何从较大的列中获取框尺寸？@nass我更新了你的fiddle，并添加了一些简单的javascript，它现在将选择最高的div，并将较小的div设置为相同的大小：嗯，我不理解子句
。我该怎么读呢？首先运行什么？html代码还是javascript部分？ 
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%;}
}