Question

我试图让一列文字与一张自适应图像对齐，但我需要修复文字，这样当你滚动时，你仍然可以看到文字。我尝试了相对于图像的文字，但它不会滚动时不会保持固定。

这是我的代码：

<div id="imgcontainer">
<div id="img2">
    <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
    <div id="img3">
        <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
        <div id="img4">
            <img src="http://www.gabrielamagana.com/ndxz-studio/site/sample/blue_drink_01.jpg" style="max-width:95%;">
            <div id="description" style="width:25%">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
        </div>
    </div>
</div>

我的css：

#imgcontainer {
margin-top: 96px;
margin-left: 314px;
position: absolute;
z-index:1;
}

#img2 {
margin-top: 0px;
margin-left: 0px;
position: static;
z-index:1;

}

#img3 {
margin-top: 10px;
margin-left: 0px;
position: static;
z-index:1;

}

#img4 {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
position: static;
z-index:1;

}

 #description {
padding-right:50px
float: right;
position: fixed;
 top: 100px;
Left: 900px;

}

这里有一个更清晰的想法（我使用了一个插件来使图像响应）：

http://jsfiddle.net/rLzc8/

非常感谢任何帮助。先谢谢你！

固定文本与响应图像对齐

0 个答案: