使DIV表格单元格填充jquery幻灯片的父表格单元格

时间:2014-11-04 22:05:31

标签: jquery html css

我已经搜索了一段时间,但我似乎无法找到一种方法来获取表格单元格来填充另一个表格单元格。

以下是情况的要点。我尝试调整Jquery slideshow以在4个响应列中显示4个单独的幻灯片。我使用百分比来确定每个表格单元格的宽度和高度。

困难在于,虽然我设法让列本身工作,但幻灯片插件需要在这些单元格中调用新的div表格单元格。至少,它是如何在所提供的示例中完成的。这是我到目前为止的相关代码。

 <body>
   <div class="container">
     <div class="gallery">
       <div id="drawc">
         <div class="draws1"></div>
       </div><div id="graphicc">
         <div class="graphics1"></div>
       </div><div id="pixelc">
         <div class="pixels1"></div>
       </div><div id="animationc">
         <div class="animations1"></div>
       </div>
     </div>
   </div>
 </body>

body {
background-image: url('http://server.dewcraft.com/doodleplex/storage/themes/KokenTheme/inc/BG.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
overflow-x: hidden;
overflow-y: hidden;
height: 100vh;
width: 100%;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.container {
text-align: center;
display: table;
margin: 0 auto;
height: 70%;
width: 100%;
padding: 0px;
border-collapse: collapse;
}
.gallery {
text-align: center;
display: table-row;
margin: 0 auto;
padding: 0;
width: 100%;
height: 70%;
}
#drawc {
display: table-cell;
height: 70%;
width: 25%;
padding: 0;
}
.draws1 {
background: url(https://dl.dropboxusercontent.com/u/8624213/Fijian_Crested_Iguana_Perth_Zoo_SMC_Sept_2005.jpg) no-repeat center center local; 
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: table-cell;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}

要加载的div将全部为div class&#34; draw#&#34;随后的数字放在#drawc div中。

您现在可以看到该网站here.

说实话,我并不太了解jquery。它看起来很复杂,但我希望我可以将代码复制到我的HTML和CSS文件中,一旦我弄清楚这个div尺寸问题,它就可以工作了。

如果有人可以帮助我了解如何使幻灯片显示有用,但如果我太了解,那么我理解。

提前感谢任何试图提供帮助的人。

0 个答案:

没有答案
相关问题