Размещение текста и слайд-шоу бок о бок в ящике

Question

Я пытаюсь разместить слайд-шоу бок о бок с текстом со слайд-шоу вправо и содержать все это внутри коробки. Я думал, что сначала понял, просто записав его в таблицу с текстом в одном столбце и слайд-шоу в другой, но как только я закончил кодирование слайд-шоу, он отказывается оставаться в пределах параметров окна - I Я попытался использовать раздел, в стороне, статью или базовые элементы div, и я просто не могу заставить его работать.

Это мой HTML:

<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> 

И это мой CSS:

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; 
} 
} 

Answer 1

http://jsfiddle.net/8734jsxL/

Поскольку .slideshow figure позиционируется absolute, она изымается из потока макета , поэтому .slideshow рассчитывает свою ширину без учета рисунка. Вы можете просто указать width: 500px, чтобы убедиться, что он остается достаточно широким.

Кроме того, я не мог понять, что вы пытаетесь сделать с вашим кодеком анимации CSS, и просто сделал все фигуры непрозрачными. Однако это очень эффективный код для создания слайд-шоу. Надеюсь, это всего лишь упражнение в демонстрации экстремальных применений CSS и что вы знаете, что решение javascript будет намного проще и более расширяемо.