jquery - 让窗口切断 float 的 div 而不是将其推过去

Question

目前我在一个网站上有一个部分，其中有一些覆盖图像的绝对文本。这在窗口很大时看起来不错，但我想在窗口中的某个点使用媒体查询。

无论如何，这是目前正在发生的事情: http://gyazo.com/ae86c3b3ab4028f32ad6ad6c846fb151

当我缩小窗口时， float 的右侧图像正在移动。我希望它留在原地，只是将 window 切断。请记住，我不希望水平滚动条在它被切断时出现，我只希望被切断的部分消失。

HTML

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

CSS

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}

Answer 1

使用position:fixed; right:0; 在您的图像上，因为这使得图像在调整窗口大小时不会移动。

<div class="sectionone">
        <div class="headingwrap">
            <h2>Heading Text</h2>
            <h3>Subheading Text</h3>
            <a href="">Free Demo</a>
        </div>
        <div class="imgwrap">
            <img src="resources/chloestore.png">
        </div>
    </div>

.imgwrap {
    width:70%;
    min-width:700px;
    overflow: hidden;
    float: right;
    margin-top:74px;
    margin-bottom:1000px;
    position:fixed; /* This is the important part */
    right:0px; /* May not need this */
}

img {
    width: 100%;

}
.headingwrap {
    margin-top:200px;
    margin-left:50px;
    float:left;
    color: #464646;
    letter-spacing: 1.5px;
    position:absolute;
}