Question

我正在处理这个HTML CSS块，我需要图像略微重叠标题div（蓝色）。

我这样做，如jsfiddle所示：https://jsfiddle.net/49zcmf4z/3/

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12 block-header">
      <div class="col-md-offset-6 col-md-6 text-center block-header">
        <h1>Title</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6 image text-center">
        <img src="http://placehold.it/350x150">
      </div>
      <div class="col-md-6">
        <div class="content">
          <p>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. </p>
        </div>
      </div>
    </div>
  </div>
</div>

和CSS

body {
  margin: 10px;
}

.container {
  border: solid 1px red;
}

.image {
  position: relative;
  z-index: 10;
}
@media (min-width: 200px) {
  .image img {
    transform: translateY(-5em);
  }
}
.image img {
  width: 100%;
  border: solid 1px black;
  margin-left: 1em;
}

.block-header {
  background-color: blue;
  height: 85px;
  padding-left: 0px;
  padding-right: 0px;
}
@media (max-width: 992px) {
  .block-header {
    padding-top: 1px;
  }
}
.block-header h1 {
  color: white;
}

我的问题是，在翻译完图像之后，包含它的div保持不变，并且在图像所在的位置有很多空白区域。

Answer 1

嘿，你可以尝试使用边距而不是变换，它更容易：

CustomerOrderForm.RecordSource = "SELECT * from PurchaseDetails WHERE OrderNumber = '" & Me.ID & "'"

https://jsfiddle.net/49zcmf4z/4/

Answer 2

你总是可以＆＃34;硬编码＆＃34;图像的边缘（可能不是最佳解决方案）：

  img {
width: 100%;
border: solid 1px black;
margin-left: 1em;
margin-bottom: -4em;}

https://jsfiddle.net/49zcmf4z/5/

CSS如何翻译图像，并将div调整为新尺寸？

2 个答案: