Question

快速的问题一直困扰着我，我无法解决如何做到这一点。我想要一个浮动到文本段落右侧的图像。没问题，有这个工作。

我要做的是将图像推送到文本下方以进行某些媒体查询（例如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>

JSfiddle here

我确信这是一个简单的解决方案，但我无法弄明白，同时允许文本以完整尺寸包装图像。

提前致谢！

Answer 1

CSS的解决方案为here，JS为here

使用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');
    }
});

Answer 2

请尝试以下操作： Demo

您可以在底部定位图像，借助绝对定位和填充底部（其值应等于/大于图像高度）

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%;
    }

Answer 3

这是你的意思

fiddle

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;
}

Answer 4

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

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

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

伪表：

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

绝对定位：

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

将文本下方的浮动图像推送到较小的屏幕

4 个答案: