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

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

jquery html css

使DIV表单元格填充jquery幻灯片的父表单元格,jquery,html,css,Jquery,Html,Css,我已经搜索了一段时间，但我似乎无法找到一种方法来让一个表单元格div填充另一个表单元格div 以下是形势的要点。我正在尝试调整a，以在4个响应列中显示4个单独的幻灯片。我使用百分比来确定每个表格单元格的宽度和高度困难在于，虽然我已经设法让列本身工作，但slideshow插件需要在这些单元格中调用新的div表单元格。至少，在提供的示例中是这样做的。这是我到目前为止得到的相关代码 <body> <div class="container"> <div

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

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

困难在于，虽然我已经设法让列本身工作，但slideshow插件需要在这些单元格中调用新的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;
}


身体{
背景图像：url（'http://server.dewcraft.com/doodleplex/storage/themes/KokenTheme/inc/BG.jpg');
背景大小：100%；
背景重复：无重复；
背景位置：中上；
背景附件：固定；
溢出x：隐藏；
溢出y：隐藏；
高度：100vh；
宽度：100%；
边界塌陷：塌陷；
保证金：0；
填充：0；
}
.集装箱{
文本对齐：居中；
显示：表格；
保证金：0自动；
身高：70%；
宽度：100%；
填充：0px；
边界塌陷：塌陷；
}
.画廊{
文本对齐：居中；
显示：表格行；
保证金：0自动；
填充：0；
宽度：100%；
身高：70%；
}
#drawc{
显示：表格单元格；
身高：70%；
宽度：25%；
填充：0；
}
.提款1{
背景：url(https://dl.dropboxusercontent.com/u/8624213/Fijian_Crested_Iguana_Perth_Zoo_SMC_Sept_2005.jpg)无重复中心局部；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
显示：表格单元格；
位置：相对位置；
身高：100%；
宽度：100%；
溢出：隐藏；
}

要加载的div都是div类“draw#”，后面的数字放在#drawc div中

你可以看到网站现在的样子

说实话，我对jquery不是很了解。这看起来很复杂，但我希望我可以将代码复制粘贴到我的HTML和CSS文件中，一旦我解决了div大小的问题，它就会起作用

如果有人能帮助我理解如何使幻灯片工作，这将是有益的，但如果这涉及太多，我理解

提前感谢所有试图提供帮助的人。

尝试另一个幻灯片放映插件，现在有很多响应插件OK，找到了另一个，尽管我有新的问题，但我认为如果我能找到正确的格式，它是可行的。