将图像浮动在文本右侧，但在小屏幕上图像会移动到文本下方

Question

我想将图像浮动到某些文本的右侧，到目前为止我已经能够做到这一点。但是在小屏幕上，我希望图像位于文本下方，但我想不出一种方法让图像出现在文本之后。

<div style="float:left;width:1px;"></div>
<div style="float:right;width:159px;margin-left:25px;">
    <img src="http://apps.weber.edu/wsuimages/academicsoftware/images/projects.jpg" />
</div>
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

这是一个fiddle： http://jsfiddle.net/cxm2hsuz/

Answer 1

您必须为您的元素定义一个宽度，向左浮动，然后如果没有足够的 space 图像，它将显示在您的文本下方。

片段

.content {
  width: 100%;
}
.text,
.image {
  float: left;
}
.text {
  width: 70%;
}
.image {
  margin: 10px;
  width: 150px;
}
.image img {
  width: 100%;
}

<div class="content">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="image">
    <img src="http://apps.weber.edu/wsuimages/academicsoftware/images/projects.jpg" />
  </div>
</div>

Fiddle

编辑

或者更好，正如@j08691 已经提到的那样，使用响应式网页设计并使用 @media 断点。

Answer 2

改变元素顺序并给它们一个显示块和宽度。然后使用媒体查询来匹配小屏幕分辨率（使其响应）。此外，您可以使图像 div 样式相对位置并尝试使用 top/left （例如以 px 为单位）属性将其放置在您想要的位置。

<div class="a"></div>
<div class="c" style="
    float: left;
    width: 300px;
">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="b" style="
    float: right;">
    <img src="http://apps.weber.edu/wsuimages/academicsoftware/images/projects.jpg" />
</div>

将图像浮动在文本右侧，但在小屏幕上图像会移动到文本下方

Float image right of text, but have image move under text on small screen

css

css-float