Css 在框中并排放置文本和幻灯片
我试着将幻灯片放在文本的旁边,幻灯片放在右边,并将其全部包含在一个框中。一开始我以为我做对了,只是把它放在一个表中,一列是文本,另一列是幻灯片,但一旦我完成了幻灯片的编码,它就拒绝停留在框的参数范围内——我尝试过使用section、aside、article或基本div元素,但我就是无法让它工作 这是我的html:Css 在框中并排放置文本和幻灯片,css,html,slideshow,box,Css,Html,Slideshow,Box,我试着将幻灯片放在文本的旁边,幻灯片放在右边,并将其全部包含在一个框中。一开始我以为我做对了,只是把它放在一个表中,一列是文本,另一列是幻灯片,但一旦我完成了幻灯片的编码,它就拒绝停留在框的参数范围内——我尝试过使用section、aside、article或基本div元素,但我就是无法让它工作 这是我的html: <table class="main"> <tr> <th> ...random text here... </th> <td&
<table class="main">
<tr>
<th>
...random text here...
</th>
<td>
<div class="slideshow">
<figure>
<img src="Pics/slide show/1.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/2.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/3.gif" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/4.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/5.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/6.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/7.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/8.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/9.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/10.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/11.png" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/12.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/13.jpg" style="width:500px;height:500px;" />
</figure>
<figure>
<img src="Pics/slide show/14.png" style="width:500px;height:500px;" />
</figure>
</div>
</td>
</tr>
</table>
由于.slideshow figure
定位为绝对
,因此它将从布局的流程中删除,因此.slideshow
计算其宽度时不考虑图形。您可以只指定宽度:500px
,以确保其保持足够宽
另外,我无法真正理解你试图用CSS动画代码做什么,只是把所有的图形都弄得不透明。但是,这是制作幻灯片的非常有效的代码。我希望这只是演示CSS的极端使用的一个练习,并且您知道javascript解决方案将更加简单和可扩展
table.main {
background-color:#fff;
margin:20px;
padding:20px;
border:5px solid black;
text-align:center;
font-family:"Fredericka the Great";
display:div;
}
table.main th, td {
padding:20px;
margin:20px;
}
table.main th {
padding:40px;
margin:50px;
font-size:25px;
}
.slideshow{
position:relative;
max-width:500px;
height:500px;
}
.slideshow figure{
margin:0;
position:absolute;
opacity:0;
}
figure:nth-child(1){
animation: xfade 42s 39s infinite;
}
figure:nth-child(2){
animation: xfade 78s 72s infinite;
}
figure:nth-child(3){
animation: xfade 78s 66s infinite;
}
figure:nth-child(4){
animation: xfade 78s 60s infinite;
}
figure:nth-child(5){
animation: xfade 78s 54s infinite;
}
figure:nth-child(6){
animation: xfade 78s 48s infinite;
}
figure:nth-child(7){
animation: xfade 78s 42s infinite;
}
figure:nth-child(8){
animation: xfade 78s 36s infinite;
}
figure:nth-child(9){
animation: xfade 78s 30s infinite;
}
figure:nth-child(10){
animation: xfade 78s 24s infinite;
}
figure:nth-child(11){
animation: xfade 78s 18s infinite;
}
figure:nth-child(12){
animation: xfade 78s 12s infinite;
}
figure:nth-child(13){
animation: xfade 78s 6s infinite;
}
figure:nth-child(14){
animation: xfade 78s 0s infinite;
}
@keyframes xfade{
0%{
opacity:1;
}
4.5%{
opacity:1;
}
7.15%{
opacity:0;
}
95%{
opacity:0;
}
100%{
opacity:1;
}
}