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

CSS中的float属性是创建“环绕”图像的文本所需的全部内容。这将创建一个位于文档文本流中的图像，但是“浮动”到左侧或右侧。

如果您使用特定类型的元素定位（例如position: absolute），则会忽略“浮动”。当您使用绝对定位时，图片实际上是从文档流程中取出，并放置在它自己的“图层”上 - 这就是它在文本顶部显示的原因。为了使您的布局正常工作，您可能需要执行以下操作：

从图片中删除绝对定位
不要浮动文本 - 将文本放在正常的内联内容中。
将图片放在文本中，然后将其浮动到右侧。

您可以在此处找到有关浮动图片的更多信息：

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

图像css下方的文本流

1 个答案: