Question

我试图在div旁边放一个img，但在某些时候它不会让我。

图片说超过1000个单词，所以我们在这里......

请不要看它所写的语言。专注于代码。

红色圆圈：应该如何

黄圈：怎么样 enter image description here

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;
}

希望我没有错过任何东西。我真的试图剥夺它。

不确定我尝试了多少种不同的方法，但至少有无绝对位置，有无边距/填充底部。什么都没有真正帮助。我已经明白“漂浮”在高度方面没有任何价值，但我无法将其推高。

内置Bootstrap btw。

你可以帮帮我吗？

由于

The site can be found here. Please scroll down

编辑：显示它应该如何的新图像。图像显示右下方的箭头/图像。

黄色：它是怎么回事

红色：应该如何（大约）不要理会箭头/图像的大小， - 我只是把它做得更大所以你要清楚地看到它:) enter image description here

Answer 1

这是一个非常简单的方法。在position课程中设置absolute streker将允许您定位两张图片而不会打扰页面的其余部分。

<强> Fiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意我添加了一些内容，以确保它不会弄乱container类中的任何内容。此外，两个蓝色框表示图像的占位符。它们将始终位于WINDOW的左上角和右下角。如果您的内容扩展到屏幕下方（他们必须滚动），箭头将保持在相同的位置，而不会随内容移动。

修改如果不使用position: absolute;而使用position: fixed;，则箭头将随内容一起移动而不是固定在窗口上。

Answer 2

使用pull-left这将float:left图片和文字

<div class="trinnfortrinn container">
    <div class="row">
            <div class="streker venstre pull-left col-md-8">
                <img src="#">

            </div>

            <div class=" rootwizard pull-left col-md-4">
                 <!-- some text -->
            </div>
     </div>
</div>

然后设置

.venstre {
    position: relative    
}

注意：您正在使用bootstrap

我旁边的div

2 个答案: