Img next div

Question

我想將一個img放在div旁邊，但是在某個時候它不會讓我。

圖片說，超過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; 
} 

希望我沒有錯過任何東西。我真的試圖剝奪它。

不知道我嘗試了多少種不同的方法，但至少有和沒有絕對位置，有和沒有保證金/填充底部。沒有什麼真正的幫助。我已經理解，「漂浮」在高度上沒有提供任何價值，但我還沒有能夠推高。

內置引導btw。

你能幫我嗎？

感謝

The site can be found here. Please scroll down

編輯：新圖片顯示應該如何。圖像顯示右下方的箭頭/圖像。

黃色：它是如何

紅：應該是這樣的（約）DONT理會箭頭/圖像的大小， - 我只是使它更大，所以你清楚地看到它:)

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類中的任何搞亂。此外，這兩個藍色框代表您的圖像的佔位符。他們將始終位於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  
} 

注意：您正在使用引導