圖片在HTML頁面

Question

不滿溢，我想知道，如果它的不可能性，以trasform一個網頁是這樣的：

這樣：

？

一些代碼中使用，正在開發中，首先得到圖像：

/** CSS **/ 
div.Testata35, div.Testata25, div.Testata70Inner, div.Testata29Inner, div.Testata15Inner { 
    background-color: #C0C0C0; 
    float: left; 
} 
div.Testata35, div.Testata25 { 
    margin-bottom: 0.2%; 
    margin-right: 1%; 
    margin-top: 0.2%; 
    padding-bottom: 0.2%; 
    padding-left: 1%; 
    padding-top: 0.2%; 
} 
div.Testata35 { 
    width: 35.5%; 
} 
div.Testata25 { 
    width: 23%; 
} 
div.Valore35, div.Valore25 { 
    float: left; 
    margin-top: 0.2%; 
    overflow: auto; 
    padding-bottom: 0.2%; 
    padding-left: 1%; 
    padding-top: 0.2%; 
} 
div.Valore35 { 
    margin-right: 2.5%; 
    width: 34%; 
} 
div.Valore25 { 
    margin-right: 1%; 
    width: 23%; 
} 
<!-- HTML --> 
<div class="ClrOvFlw"> 
     <div class="PrimaSx"> 
      <div class="ClrOvFlw"> 
       <div id="T1" class="Testata35">Modello</div> 
       <div id="T1A" class="Testata35">Linea</div> 
       <div id="T2" class="Testata25A"> 
        <div style="clear: left; float: left; width: 70%;">Standard</div> 
        <div style="clear: right; float: right; width: 20%; z-index: 1; overflow: auto;"> 
         <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa"> 
        </div> 
      </div> 
      <div class="ClrOvFlw"> 
       <div id="V1" class="Valore35">BELLARIA</div> 
       <div id="V1A" class="Valore35">MODULAR</div> 
       <div id="V2" class="Valore25A">EN ISO 20345:2011</div> 
      </div> 
     </div> 
     <div class="Valore25B"> 
     </div> 
    </div> 
<div class="ClrOvFlw"> 
     <div id="T3" class="Testata35">Codice Articolo</div> 
     <div id="T4" class="Testata35">Protezione</div> 
     <div id="T5" class="Testata25">Disponibilit&agrave; a Magazzino</div> 
    </div> 
    <div class="ClrOvFlw"> 
     <div id="V3" class="Valore35">83297-07LL</div> 
     <div id="V4" class="Valore35">S1P SRC</div> 
     <div id="V5" class="Valore25"> 
      <img id="V5Img" src="FotoMagazzino\maga2-ITA.jpg" alt="Disponibilità"> 
     </div> 
    </div> 

正如你所看到的，我已經嘗試了一些東西，以實現第二圖像中，但沒有成功所示的結果。作爲備註：我不是專業的HTML/CSS開發人員，所以我的「代碼」並不是最佳實踐提示。

編輯：

正如你們許多人建議，我已經更新這樣我的代碼：

<div class="ClrOvFlw"> 
       <div id="T1" class="Testata35">Modello</div> 
       <div id="T1A" class="Testata35">Linea</div> 
       <div id="T2" class="Testata25A"> 
        <div style="float: left; clear: left;">Standard</div> 
        <div class="Valore25B" style="float: right; clear: right; position: relative;"> 
         <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; display : block; width: 100%; height: 100%;"> 
        </div> 
       </div> 
      </div> 

相同的CSS如上。我的結果：

編輯2：

以下酒坊的建議，我已經更新了我的代碼如下：

<div id="T2" class="Testata25A"> 
    <div style=" clear: left; float: left;">Standard</div> 
    <div class="Valore25B" style="position: relative; overflow: auto;">&nbsp; 
     <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa" style="position: absolute; right: 0px;overflow: visible; height: 100px;"> 
    </div> 
</div> 

得到這樣的結果：

我想我在跟蹤你的提示人做錯了什麼。

Answer 1

你可以使用position：absolute;該圖像上，如果你能出示擔保總是有足夠的空間，整個圖像將顯示：

div#V25BImg{ 
 
    display:block; 
 
    position:absolute; 
 
    width:[WIDTH]px; 
 
    height:[HEIGHT]px; 
 
}

你也可能需要添加位置：相對;在圖像的父級上，以確保絕對定位的元素將被放置在頁面的正確部分。

Answer 2

設置圖像持有人絕對定位：

這是未經測試，但應該給你一個想法

<div style="position: absolute; top: 0; right: 0; width: 20%; z-index: 1; overflow: auto;"> 
    <img id="V25BImg" src="./FotoNorma/standard01-ITA.jpg" alt="Marchio Normativa"> 
</div> 

Answer 3

如果你的位置你img絕對，它會忽略包裝。

div #V5 img { 
position:absolute; 
right:0px; 
} 

Answer 4

也許你可以在div添加position: relative;包裹的圖像，並添加

position: absolute; 
top: 25px; 
margin-left: 10px; 

對圖像做。您的代碼應該是這樣的，

<div style="width: 20%;position: relative;"> 
<img id="V25BImg" src="logo.png" alt="Marchio Normativa" data-pin-nopin="true" style="position: absolute;top: 25px; margin-left: 10px; 
"> 
</div> 

檢查了這一點 https://jsfiddle.net/1w772kgg/1/

Answer 5

如果你需要一個正確的解決方案，不使用絕對定位，除非絕對必要的。一個浮動元件可以從它的父容器中浮出來，如果：

• 母體是overflow:auto，和
• 沒有相關的結算對象被放置在元件（相同側CSS clear後，太寬的線，overflow:hidden塊元件等）

See float rules here.

嘗試提供這樣的條件。