将表转换为AutoResize Div

时间:2013-02-27 19:33:47

标签: html css html-table

目前我正在使用桌子来显示相同​​大小的4个相机:左上/右上/左下/右下。我想切换到div,有可能事情可能会更自动一些。

这就是我所拥有的:

<table border="">
   <tr>
      <td>
      <object id="Player1" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.65/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
      <td>
      <object id="Player2" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.67/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
   </tr>
   <tr>
      <td>
      <object id="Player3" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.70/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
      <td>
      <object id="Player3" height="600" width="800" border="" classid="CLSID:745395C8-D0E1-4227-8586-624CA9A10A8D">
         <param name="AutoStart" value="1">
         <param name="UIMode" value="none">
         <param name="MediaType" value="mjpeg">
         <param name="NetworkTimeout" value="5000"><!-- use this param if you want to change the network timeout -->
         <param name="MediaUsername" value="root"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaPassword" value="admin"><!-- this param only necessary if restricted access is enabled -->
         <param name="MediaURL" value="http://10.77.130.12/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10"><!-- your media url goes here -->
      </object>
      </td>
   </tr>
</table>

我想切换到使用div。我看了看堆叠的div,看起来我可以有一个容器来指定整个宽度。在这种情况下,它可能是1080或720电视屏幕。是否可以将4个div最大化为可用空间量,并自动执行或指定宽度。

我遇到的问题:是否可以根据屏幕尺寸或容器宽度自动在对象线中进行高度和宽度?它也在网址中硬编码。

编辑:http://10.77.130.12/axis-cgi/mjpg/video.cgi?resolution=800x600&fps=10(宽度/高度在那里硬编码),也在对象线上。保持硬编码我确信我可以将事情转换为div。但是让它们根据窗口大小自动调整大小并与视频对象交互是我不确定的。如果那是可能的。

1 个答案:

答案 0 :(得分:0)

您可以使用%作为宽度和高度,相应地进行计算,它将适合您的布局/视口...

父div(表)的宽度为:100%