每当我尝试构建一个响应式图像轮播时,我必须使用绝对定位在某些时候从HTML流中取出图像。
是不是可以创建一个轮播,其中当前图像是其容器的100%宽度,其他图像隐藏在溢出中,并且整个事物不会被流出,这样任何文本都会在它之后出现由此产生的DOM不会忽略旋转木马,并最终在图像后面左上角的一个时髦位置?
考虑这个HTML:
<div id="featured">
<div id="featured-title">
Title
</div>
<div id="featured-images">
<div class="featured-images-image">
<img src="lib/imgs/fi-1.jpg"/>
</div>
<div class="featured-images-image">
<img src="lib/imgs/fi-1.jpg"/>
</div>
</div>
<div id="featured-content">
<div id="featured-content-text">
<h3>
Title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel enim id massa suscipit vehicula non sit amet augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed nisi urna, volutpat nec justo vel, rhoncus fermentum dolor. Integer pharetra, lectus eget auctor consectetur, tellus mauris gravida eros, nec porta augue tortor ac nibh. Fusce aliquam vel risus vitae luctus. Etiam lacinia ultricies tellus, nec venenatis magna viverra eu. Etiam tincidunt nibh hendrerit tincidunt ullamcorper. Nunc non urna congue, ultrices lacus sollicitudin, pellentesque ante. Etiam mi leo, sollicitudin ac tempus a, semper eu justo. Donec eget elementum dolor. Proin non tellus facilisis, suscipit velit eu, imperdiet urna. Proin non nulla suscipit, cursus tellus eleifend, tristique justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis luctus velit et pellentesque faucibus.
</p>
</div>
</div>
</div>
我如何将第一张图片的宽度设为100%,将第二张(和任何其他)图像隐藏起来,同时保留在文档的流程中,使其下方的文字保持在下方旋转木马区域。
这甚至可能吗?我还没理解HTML专业人员是如何使用这种标记语言完全丢失的。我明白,如果我要明确强制包含元素的宽度和高度,那么我就不必担心图像被从流中取出 - 但响应性是关键。