如何防止iframe阻塞文字？

Question

我对我正在制作的网站有疑问，当我添加外部网站的iframe时，iframe会阻止部分文本，使其无法读取。 HTML：

<div id="container">
    <br>


    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet tincidunt tortor, quis aliquet enim. Fusce laoreet nulla non nisl placerat, sit amet hendrerit augue vehicula. Mauris molestie aliquam sapien, vitae aliquam purus. Mauris vulputate non mi et consequat. Donec tellus sem, euismod nec tincidunt eu, rutrum ut mauris. Integer dignissim eu mauris nec lacinia. Integer euismod consectetur metus, nec fringilla nulla luctus in. Nulla auctor dui non nibh porta tristique. </p>
    <p class="text">Maecenas et fringilla leo, sit amet cursus ex. Cras ultricies est quam, eget tempus urna malesuada cursus. Vestibulum varius quam sit amet augue dictum, in vehicula nisl tempor. Vestibulum bibendum, ante facilisis elementum tempor, purus lorem mollis erat, vel cursus enim augue vitae arcu. Integer nisl felis, malesuada rhoncus nisl in, vestibulum dictum risus. Phasellus vitae urna rutrum, accumsan enim placerat, sollicitudin ligula. Sed sollicitudin dolor a purus imperdiet, a efficitur est blandit. In ac odio sapien. Phasellus convallis, erat et facilisis consectetur, orci sapien lacinia odio, sed blandit leo velit vitae urna. Quisque in lobortis magna, sed varius felis. Nullam laoreet eleifend nisi. Etiam tincidunt orci lacus, eu scelerisque ante lobortis ac. Suspendisse quis aliquet quam. Aliquam blandit purus nec lectus pulvinar, vitae gravida mauris efficitur. Vivamus tempus varius nunc, vel congue nibh tincidunt eu. Morbi efficitur enim eget eros efficitur pretium.</p>
    <iframe src="https://r6db.com/player/33b1022e-db90-454a-9654-326b960ef0a7" id="siege"><p>Your browser does not support iframes.</p></iframe>
</div>

CSS：

#container {
    clear: left;
    min-height: 100%;
    position: relative;
    padding-bottom: 44px;
    width: 100%;
    height: 100%;
}

#siege {
    position: absolute;
    top: 0;
    right: 0;
    height: 250%;
    width: 40%;
    align: right;
}

.text {
    float:inherit;
    margin-right: 5px;
}

Answer 1

我已将宽度添加到500px的.text类和右对齐的#seige id。检查这是否适合您。

.text {
        float:left;
        margin-right: 5px;
        width: 500px; }


#siege {
    position: absolute;
    top: 0;
    right: 0;
    height: 250%;
    width: 40%;
    align: right;
}