html - div 旁边的 img

Question

我想在 div 旁边放置一个 img，但有时它不允许我这样做。

图片说了 1000 多个字，所以我们开始......

请不要看它使用的语言。关注代码。

红圈:应该怎样

黄色圆圈:情况如何

HTML(精简)

<div class="trinnfortrinn">
            <div class="streker venstre">
                <img src="#">
            </div>

            <div class="container rootwizard">

            </div>

            <div class="streker hoyre">
                <img src="#">
            </div>
</div>

CSS(精简)

.streker {
    max-width: 200px;
}

.streker img {
    width: 200px;   
}

.venstre {
    float: left;    
}

.hoyre img {
    position: absolute;
    right: 0;
}

.trinnfortrinn .container {
    clear: none;    
    margin-top: 40px;
    margin-bottom: 0px;
}

希望我没有遗漏任何东西。我真的试着把它剥离下来。

不确定我尝试了多少种不同的方法，但至少有和没有绝对位置，有和没有边距/填充底部。什么都没有真正帮助。我知道“ float ”在高度方面没有任何值(value)，但我无法将其推高。

内置 Bootstrap 顺便说一句。

你能帮帮我吗？

谢谢

The site can be found here. Please scroll down

编辑:显示应有的新图像。图像显示右下角的箭头/图像。

黄色:怎么样

红色:它应该如何(大约)不要在意箭头/图像的大小，- 我只是把它做得更大，这样你就可以清楚地看到它了:)

Answer 1

这是一个非常简单的方法。在 streker 类上将 position 设置为 absolute 将允许您在不影响页面其余部分的情况下定位两个图像。

Fiddle

.streker {
  position: absolute;
  display: block;
  width: 125px;
  height: 35px;
  background: blue;
}
.venstre {
  top: 0;
  left: 0;
}
.hoyre {
  bottom: 0;
  right: 0;
}

<div class="trinnfortrinn">
  <div class="streker venstre">
    <img src="#" />
  </div>
  <div class="container rootwizard">
    <div class="row">
      <div class="col-md-12">
        <h1>Hello</h1>
      </div>
    </div>
  </div>
  <div class="streker hoyre">
    <img src="#" />
  </div>
</div>

注意 我添加了一些内容以确保它不会真正混淆 container 类中的任何内容。此外，两个蓝色框代表您的图像的占位符。它们将始终位于窗口的左上角和右下角。如果您的内容在屏幕下方展开(它们必须滚动)，箭头将保持在相同的位置，不会随内容移动。

编辑 如果您不使用 position: absolute; 而使用 position: fixed; 箭头将随内容移动而不是固定到 window 。