Question

我的位置有问题：绝对和漂浮...

正如您在小提琴中看到的那样，当您调整浏览器大小时，左侧的文本会在图像下方，但我想要的是在图像上方。

当我在 position: absolute 上删除 .image-ipad 时，它会像那样工作，但在我的项目中，我需要将图像粘贴在左侧，和右侧的文字（正常）

代码：

HTML

   <section class="case eat-login">
        <div class="row">

<h3 class="stick-right">Login Screen</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">

<div style="clear:both;"></div>

</div>
</section>

CSS

.stick-right{
    float:right;
    clear:both;
}
.eat-login {
    position: relative;
    padding: 130px 0 130px;
    clear: both;

}
.eat-login p{
    text-align: right;
    float: right;
    clear: both;
    width: 45%;
    font-size: 15px;
    font-family: "Proxima Nova";
    color:#9e9d9d;  
    line-height: 25px;
}
img.image-ipad {
    left:0px;
    top:40px;
}

JSFiddle：http://jsfiddle.net/jt9jk2g0/6/

谢谢！

Answer 1

您可以通过对小屏幕尺寸使用css @media查询来执行此操作：

JSFiddle - DEMO

<强> HTML：

<section class="case eat-login">
    <div class="row">
        <img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
        <h3 class="stick-right">Login Screen</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div style="clear:both;"></div>
    </div>
</section>

<强> CSS：

.stick-right {
    float:right;
    clear:both;
}
.eat-login {
    position: relative;
    padding: 130px 0 130px;
    clear: both;
}
img {
    position: absolute;
}
.eat-login p {
    text-align: right;
    float: right;
    clear: both;
    width: 45%;
    font-size: 15px;
    font-family:"Proxima Nova";
    color:#9e9d9d;
    line-height: 25px;
}
@media (max-width: 500px) {
    h3 {
        margin-top:300px;
    }
}

位置：绝对和向左/向右浮动不起作用

1 个答案:

JSFiddle - DEMO