Question

请看这里的示例：https://codepen.io/agahi/pen/XErbPR

.leftDiv {
  width: 600px;
  margin: 50px;
  float: left;
  border: 2px solid green;
}

.offsetImage {
  float: left;
  width: 300px;
  position: relative;
  top: -40px;
  left: -40px
}

<div class='leftDiv'>
  <img src='https://i.guim.co.uk/img/media/de538985136b3b0fa819a7a6318427d936e9eccd/0_19_2928_1757/master/2928.jpg?w=620&q=20&auto=format&usm=12&fit=max&dpr=2&s=b76172f92da8780e2bc3354a169453f2' class='offsetImage' />The fast food chain KFC has been forced
  to temporarily close most of its UK outlets after problems with a new delivery contract led to a chicken shortage. A total of 562 KFC outlets remained shut following a weekend of disruption that peaked on Sunday night at 646 closures. KFC published
  a list of only 338 of its 900 stores that were still open on Monday night. Many were offering a limited menu and restricted opening hours. The chicken delivery problem is so severe that the company cannot say when operations will be back to normal.
  But it said it was working “flat out” to resolve the crisis. Signs on many of the closed stores said: “Sorry, we’re closed. We deliver our chickens fresh into our restaurants, but we’ve had a few hiccups with the delivery today. We wouldn’t want to
  be open without offering our full menu, but we’ll be back at the fryers as soon as we can.” KFC tried to make light of the problem, saying “the colonel is working on it” - a reference to the chain’s US founder, Colonel Sanders, whose image adorns the
  brand. In a statement it blamed the chicken shortage on a contract with delivery company DHL.
</div>

右边的红色边框的div是正常的。左边的绿色边框就是我想要的。我希望图像具有负顶部和负面左侧，以便它看起来像被拖出div。

问题是文本没有环绕左侧的图像。

是否有一种方法可以在图像周围填充负顶部和左侧？

Answer 1

您可以使用负边距而不只是左上角：

.offsetImage {
  float: left;
  width: 300px;
  position: relative;
  margin-top: -40px;   /* change to margin */
  margin-left: -40px
}

Updated Pen

负边距留下空白

1 个答案: