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>

这是一个小提琴： http://jsfiddle.net/cxm2hsuz/

Answer 1

您必须为元素定义宽度，向左浮动然后如果图像空间不足，它将显示在文本下方。

<强>段

.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样式位置相对并尝试使用顶部/左侧（例如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>

浮动图像右侧的文本，但在小屏幕上的文本下移动图像

2 个答案: