将浮动图像推送到文本下方以缩小屏幕

一直困扰着我的快速问题，我不知道该怎么做。我想要一个浮动在一段文本右侧的图像。没问题，已经工作了。

我想做的是将该图像推到某些媒体查询的文本下方（例如在 768px 下）。由于图像是段落中的第一个元素，因此我在执行此操作时遇到了问题。

谢谢。

img.right {
    float: right;
    margin: 0 0 10px 10px;
    width: 150px;
    height: auto
}

<p><img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.</p>

在这里小提琴

我确定这是一个简单的解决方案，但是在允许文本以全尺寸包裹图像的同时，我无法弄清楚。

提前感谢！

尝试如下：演示

您可以借助绝对定位和底部填充将图像

定位在底部（其值应等于/大于图像高度）

.CSS：

p>img {
    float: right;
    margin: 0 0 10px 10px;
    width: 150px;
    height: auto
}
@media (max-width:767px) {
    p {
        position:relative;
        height:100%;
        padding-bottom:170px;
    }
    p>img {
        position: absolute;
        bottom: 0;
        left:33%;
    }

CSS解决方案在这里，JS的解决方案在这里

带 CSS

@media (max-width: 768px) {
    img.right {
        display: none;
    }
    img.right.visible768{
        display: block;
        float:none;
    }
}

使用 JS

$(window).resize(function(){
    var viewportWidth = $(window).width();
    if(viewportWidth <= 768){
        $('.right').appendTo('p');
    }
    else if (viewportWidth >= 769){
        $('.right').prependTo('p');
    }
});

这是你什么吗

小提琴

.HTML

<p>
<img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />
    <span class="desc">Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.</span>
</p>

.CSS

p {
    display:table;
}
img.right {
    float: right;
    margin: 0 0 10px 10px;
    width: 150px;
    height: auto;
    display:block
    display:table-footer-group;
}
span.desc {
    display:table-header-group;
}

好吧，如果图像是第一个，你需要在下面显示它，你实际上只有两个选择。

使用图像的绝对定位（需要您知道其大小），或使用伪表（不需要大小或图像）。

这是代码：http://jsfiddle.net/yy98w8rj/1/

伪表：

.right {
  float: right;
  margin: 0 0 10px 10px;
  width: 150px;
  height: auto;
}
@media (max-width: 768px) {
  p {
    display: table;
  }
  .right {
    float: none;
    display: table-footer-group;
  }
  .text {
    display: table-header-group;
  }
}

<p>
  <img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />
  <span class="text">
        Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea. An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea, justo adolescens argumentum nec et.        
    </span>
</p>

绝对定位：

p img {
  float: right;
  margin: 0 0 10px 10px;
  width: 150px;
  height: auto
}
@media (max-width: 768px) {
  p {
    position: relative;
    height: 100%;
    padding-bottom: 170px;
  }
  p img {
    position: absolute;
    bottom: 0;
  }
}

<p>
  <img class="right" src="http://icons.iconarchive.com/icons/matiasam/ios7-style/512/Clear-Tick-icon.png" />Lorem ipsum dolor sit amet, ex cum utinam nullam equidem, eam an virtute antiopam molestiae. Cum expetendis necessitatibus ea. His iisque conceptam ea, vel novum maiorum ea. Has duis tempor at, quo no elit denique fastidii. Eam justo partiendo te. Diam
  clita detraxit in pri, copiosae accusata sadipscing te nec. Ad soleat quaerendum pro. Id eos causae eirmod, nec libris quidam commodo cu. Vis et vidit dicam. Ipsum eruditi erroribus eam in, eum lucilius sadipscing omittantur id, aliquam adolescens id
  nam. Ius deleniti constituam no. Ut dicam ridens pro, qui ea viris scriptorem. Sed ei dicam graeci regione, et placerat suscipiantur has. Solum ridens eu mel. Eius omittam ex per. Summo ancillae ex vim, eam eu case dicit, ei sale primis facete sea.
  An vix omittam accommodare. An usu rationibus sententiae cotidieque, eu natum debet veniam eum, has ad harum urbanitas. Sumo denique ius ut, has ne harum errem moderatius. Duis habemus philosophia ius ea, cu unum vidisse tritani sea. Sit amet menandri
  vulputate no, ad pri quis noster eripuit. Dolore ornatus impedit ei pro, nam modo interesset ad.Et qui munere dictas noluisse. Detraxit suavitate eos ad. Ius luptatum mnesarchum ei, no quando vivendo pro. Ad suas atomorum est, cetero diceret duo ea,
  justo adolescens argumentum nec et.
</p>

相关内容

最新更新

热门标签：