Как я могу стилизовать эту страницу так, чтобы высота div, содержащего слайд-шоу, была высотой изображений в слайд-шоу?
<html>
<style>
img {width:100%;}
</style>
<h1>Screenshots</h1>
<div id="slide" style="position: relative;">
<img src="https://multibit.org/images/en/screenshots/help-contents.png" >
<img src="https://multibit.org/images/en/screenshots/send.png" >
</div>
<h1>Hidden text - how can I see it? This text is hidden under the slide show. </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://multibit.org/jquery/plugins/cycle/jquery.cycle.lite.js"></script>
<script>
$(function() {
$('#slide').cycle({
delay: -1000,
});
});
</script>
</html>
В настоящий момент высота div кажется нулевой, поэтому следующий текст скрыт под слайдами. Благодарю!
Объяснение:
Высота слайда div сворачивается из-за абсолютного расположения изображений внутри него, то есть высота сворачивается до нуля.
Вы можете решить эту проблему, установив минимальную высоту в родительском div:
#slide { min-height:352px; }
И здесь работает FIDDLE