图片在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.

尝试提供这样的条件。