0

我以为我在这里有答案：SO question

不幸的是，虽然它在 PC 上看起来很棒，但在手机上查看时，文本会被旋转的图像覆盖。

我的 CSS is class 目前设置如下：

.fadein { position:relative; margin-left:auto; width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

该网站可以在这里查看：YIS网站

任何人都可以建议我是否可以进行任何 CSS 更改以防止图片覆盖文本，而不会遇到下一张图片与上一张相分离的先前问题。

4

3 回答 3

1

Actually, the content is covered if you reduce the width of any browser.

remove #intro float attribute and instead add: 

display: inline-block;
vertical-align: top;

to both #intro and .fadein

what this does is displays each block as an inline block, meaning, with space they will display horizontally and when it is reduced it will wrap; however, there is one other thing that will keep this wrapping from happening properly, that is, the relative width of #intro. Now, you can keep this, but also add:

min-width: someWidthInReaUnits

This will make the text force the image div to wrap once the minimum width is hit.

Finally, you can use margins fine-tune the position of both elements as needed.

于 2013-07-14T21:12:30.087 回答
1

您需要将介绍 div 设为 100% 宽度减去图像宽度。这样，它将保持流动。

#intro {
    width: -moz-calc(100% - 310px);
    width: -webkit-calc(100% - 310px);
    width: calc(100% - 310px);
}
于 2013-07-14T20:46:07.613 回答
0

这就是我要做的：

@media screen and (max-width:360px){
    #intro {
        width:100%;
        margin:0 auto;
        float:none;
        height:auto;
    }
    .fadein{
        position:relative;
    margin:0 auto;
    width:300px;
    height:300px}
    .content-wrapper{margin:0 auto;max-width:100%}
    .featured {

        width:100%;
        float:none;
    }
    .float-left{float:none} // it seems that it will not affect view

    .float-right{float:none} // it seems that it will not affect view
}

图像将放置在文本下方，其余部分看起来非常好（在响应式设计视图中测试，firefox -360px 宽度）。我已经尝试了边距......当我为#intro 设置固定大小时......（这就是为什么margin:0 auto 会留在某些地方）

于 2013-07-14T21:02:05.520 回答