图片下方的文字排列 css

Question

我是新来的。我在这方面有一个小问题。我有一张背景图片，右下角有一张图片，在我的 PSD 中，我想让文字看起来像这样：Original

但目前在我的代码中，它看起来像这样：Current

如您所见，文本实际上在 div 下方流动，而不会自动换行。如果有任何解决方案，请在此先感谢！

我有两张单独的图片。一个用于背景图像（全青色背景），另一个是 ipad 图像，它绝对定位并且也位于背景图像的右下角。

HTML:

 <section id="ipadsection">
    <div class="container fluid bgimage">

        <div class="blockoftext">
                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            Lorem ipsum dolor sit amet, consectetur adipisicing 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 class="ipadimg">
                <img src="assets/img/ipad.jpg" alt="ipad">
           </div>
        </div>
    </div>
  </section>

CSS:

.bgimage {      
  background: url('../img/backgroundipad_03.jpg');
  height: 400px;
  background-size: cover;
  position: relative;
}
.blockoftext {
  float: left;
  text-align: left;
}
.ipadimg {
  position: absolute;
  bottom: 0px;
  right: 0px;
  float: right;
  margin-bottom: 1px;
  width:50%;
}

Answer 1

您现有代码的主要问题是您使用的 position: absolute 以及图像元素未正确放置在标记中。

因为 <div class="ipadimg"> div（及其 CSS 规则）不是必需的，所以我删除了它，将 img 移到最后一段之前并添加了这个新的规则。

.blockoftext img {
  float: right;
}

堆栈片段

.blockoftext {
  float: left;
  text-align: left;
}
.blockoftext img {
  float: right;
}

<div class="blockoftext">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    <img src="http://www.placehold.it/300x150" alt="ipad">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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>

根据评论更新

这里的文字分为两组。不利的一面是，可以编辑文本的用户需要知道它必须被拆分，这样一部分文本将环绕图像。

旁注：

我个人会通过制作文本模板然后测量新编辑的文本然后将浮动图像注入其中来解决这个问题。（虽然不能制作示例操作方法，因为我没有使用 WordPress）

如果允许用户编辑文本，那么让他们也更改图像可能是合适的。他们的文字可能会说一些与现有文字不准确的内容

.blockoftext, .blockoftext-withimg {
  float: left;
  text-align: left;
}
.img-right {
  float: right;
}

<div class="blockoftext">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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="blockoftext-withimg">
  <img class="img-right" src="http://www.placehold.it/300x150" alt="ipad">
  
  <span class="txt-left">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    </span>
</div>

Answer 2

CSS 中的 float 属性是您创建 'wraps around' 图片所需的全部内容。这将创建一个位于文档文本流中的图像，但 'floated' 位于左侧或右侧。

如果您使用特定类型的元素定位，例如 position: absolute，

"Floating" 将被忽略。当您使用绝对定位时，图片实际上 从文档流中取出 ，并放置在它自己的 'layer' 上 - 这就是它显示在您的顶部的原因文本。为了使布局正常工作，您可能需要执行以下操作：

去掉图片的绝对定位
不要浮动文本 - 将文本作为普通内联内容放置。
将图片放在文字中，并向右浮动。

您可以在这里找到更多关于浮动图片的信息：

http://www.w3schools.com/css/css_float.asp

图片下方的文字排列 css

Text flow beneath image css

html

css

text

positioning